下拉元素的 useState - ReactJS

Question

问题

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

程序如何运作

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

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

代码

 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。但是还是不行。

select下拉菜单项

之前的屏幕截图

select下拉项

后的屏幕截图

更新：添加图片以供参考

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

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

在下拉道具上：

添加名称=“角色”
为什么需要在每个表单元素上提供 "name" 属性以获取 onChange 函数的值。
onChange 函数看起来 "e.target.name" 这是您没有在下拉输入中提供任何“名称”道具。

Answer 3

我运行遇到了与我正在制作的表格相同的问题，我的解决方案根本不是 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,
})

下拉元素的 useState - ReactJS

useState for Dropdown elements - ReactJS

javascript

jquery

reactjs

use-state

问题

程序如何运作

代码

select下拉菜单项

select下拉项