下拉元素的 useState - ReactJS

Question

问题

当我在下拉菜单中选择一个选项时，没有任何内容被选中，因为 role 的值是一个空字符串。使用的 UI 框架是 Semantic UI。

程序的工作原理

当用户在 Input 字段中输入时，函数 onChange 接受输入并将其保存到 values 中的空字符串中。但是，当输入类型是具有预定义输入的下拉菜单时，这是无效的。因此，当用户选择任何选项时，它会自动变为空字符串。

我无法理解如何解决这个问题。

代码

 const [values, setValues] = useState({
      username: '',
      password: '',
      confirmPassword: '',
      email: '',
      role: '' // This here seems to be the issue.
  })

//OnChange Function (works for Input types)

 const onChange = (e) => {
        setValues({...values, [e.target.name]: e.target.value});
 }

//FormInput for reference (working)

<Form.Input 
      label="Full Name"
      placeholder="Full Name"
      type="text"
      name="username"
      value={values.username}
      onChange={onChange}
/>


//DropDown menu from SemanticUI

<Dropdown
    placeholder="Select Role"
    name="role"
    fluid
    selection
    options={options}
    value={values.role}
    onChange={onChange}
/>

//Options for Dropdown Menu

const options =[
        {
            key: 'Client',
            text: 'Client',
            value: 'Client'
        },
        {
            key: 'Employee',
            text: 'Employee',
            value: 'Employee'
        }
    ]

更新：在下拉菜单中添加了"name"=role。但是还是不行。

选择下拉项前的截图

选择下拉项后的屏幕截图

更新：添加图片以供参考

Answer 1

您的下拉菜单onChange 应该是这样的

 const onChange = (e, {value}) => {
    setValues({...values, role: value});
 }

请参阅此处的受控输入演示：https://react.semantic-ui.com/modules/dropdown/#usage-controlled

编辑：如果您不想更新 onChange 函数，那么也许可以这样做。

<Dropdown
    placeholder="Select Role"
    fluid
    selection
    options={options}
    value={values.role}
    onChange={(e, {value}) => onChange({
     target: {name: 'role', value}
    })}
/>

Answer 2

我在制作表格时遇到了同样的问题，我的解决方案根本不是 DRY，但它有效。

 <select name="State" id="state" value={props.formInputs.state} onChange={props.handleChange}> 
           <option id="state" value="Alabama">AL</option>
           <option id="state" value="Alaska">AK</option>

对于下拉菜单中的每个选项，我为我的handleChange() 添加了id="state"，然后它能够​​从下拉菜单中选择任何选项并将其放入我的对象以传递给我的数据库。

我的更改处理程序和useState() 挂钩如下：

const [state, setState] = useState({
prayer_request:{
name: '',
state:'',
temptation:'',
}
})
const handleChange = (event) =>{
const updateInput = Object.assign({}, formInputs, { [event.target.id]: 
event.target.value}, )
updateFormInputs(updateInput)
}
const [requests, setRequests] = useState([])
const [formInputs, updateFormInputs] = useState({
name: '',
state: state,
temptation: state,
})

Answer 3

    <Dropdown
        placeholder="Select Role"
        name="role"
        id="role"
        fluid
        selection
        options={options}
        value={values.role}
        onChange={onChange}
    />

关于下拉道具：

• 添加名称="角色"

• 为什么需要在每个表单元素上提供 "name" 属性以获取 onChange 函数的值。

• onChange 函数看起来 "e.target.name" 也就是说您没有在下拉输入中提供任何“名称”道具。