React中select下拉框选中值后自动禁用仅展示选中内容的实现问题

你需要新增状态控制select的禁用属性，同时在选中事件中完成赋值和禁用的逻辑，修改后的完整代码如下：

import React,{useState} from 'react'

function Pruebas() {
  // 存储选中值
  const [select, setSelect] = useState('');
  // 控制select是否禁用
  const [isDisabled, setIsDisabled] = useState(false);

  const elselect =  (e) => {
    // 获取选中的值
    const selectedVal = e.target.value;
    setSelect(selectedVal);
    // 选中后直接禁用组件
    setIsDisabled(true);
  }
  return (
    <div>
      <form>
        {/* 绑定value和disabled属性，注意修正第二个option的value为dos，避免和第一个重复 */}
        <select 
          value={select}
          disabled={isDisabled}
          onChange={ elselect }
        >
          <option value="uno">uno</option>
          <option value="dos">dos</option>
        </select>
      </form>
      
    </div>
  )
}

export default Pruebas

改动说明 #

• 新增isDisabled状态，默认值为false，选中后改为true绑定到select的disabled属性实现禁用效果
• 给select绑定value属性和状态select关联，保证选中值正确展示
• 修正了原有第二个option的value值重复问题，避免选中逻辑异常
• 在elselect事件中通过事件对象e.target.value拿到当前选中值，完成状态更新后立即触发禁用

内容的提问来源于stack exchange，提问作者Giovanny