在反应中获取选择选项的价值答案

【问题标题】：Getting value of select option in react在反应中获取选择选项的价值
【发布时间】：2018-04-05 17:54:45
【问题描述】：

我在我的 react 应用程序中使用 Material UI，并试图获取选择表单的值。

这与以下代码完美配合：

<select name="role" value={props.role} onChange={props.handleInputChange}>
            <option value="client">Client</option>
            <option value="worker">Worker</option>
          </select>

但是，如果我尝试使用 Material UI 实现完全相同的东西

 <FormControl margin="dense" className={classes.textFieldSelect}>
            <InputLabel htmlFor="role" >Role</InputLabel>
            <Select
              value={props.role}
              onChange={props.handleInputChange}
              input={<Input id="role" />}
            >
              <MenuItem value="worker">Worker</MenuItem>
              <MenuItem value="client">Client</MenuItem>
            </Select>
 </FormControl>

这是我的父组件中手动输入更改的代码：

  handleInputChange(e) {
    e.preventDefault();
    const target = e.target;
    const value = target.value;
    const name = target.name;

    this.setState({ currentUser: { ...this.state.currentUser, [name]: value } });
  }

当我单击菜单项时，选择栏的值不会改变。但是，如果我在纯 HTML 元素中选择不同的角色，TextField 中的值会发生变化。

关于我做错了什么的任何线索？

【问题讨论】：

我认为当前的 sn-p 没有任何问题，也许如果您显示更多代码，例如：handleInputChange ?
我现在将其添加到问题中。有趣的是，它与的纯 HTML 实现配合得很好
props.role 呢？这会在您的父组件中更新吗？
我刚刚花了一些时间调试它，结果发现它不起作用的原因是我单击时未定义 e.target.name 属性。当我调用handleInputChange（例如handleInputChange（'role'））时，我可以通过传入一个特定的名称参数来解决这个问题。不过感谢您的关注！
所以角色没有得到更新。这就是问题所在。

标签： html reactjs material-ui

【解决方案1】：

我只是花了一些时间调试它，结果发现它不起作用的原因是当我单击 .当我调用handleInputChange（例如handleInputChange（'role'））时，我可以通过传入一个特定的名称参数来解决这个问题。不过感谢您的关注！

【讨论】：