Question

我正在使用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>

以下是我父组件中handInput更改的代码：

  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中的值会发生变化。

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

Answer 1

我只是花了一些时间调试它，结果发现它没有工作的原因是因为当我点击时，e.target.name属性是未定义的。我可以通过在调用handleInputChange时传递一个特定的name参数来解决这个问题（例如handleInputChange（＆＃39; role＆＃39;））。谢谢你看着它！

获得选择选项的价值

1 个答案: