reactjs - 如何使用 React 从 Material-ui 中的 SelectField 获取 id？

Question

我已经查看并尝试了其他问题的解决方案，但我似乎无法让它发挥作用。我面临的问题是 event.target.id 和 event.target.value 在这里不起作用。我做了一些研究并找出了原因。现在我只需要一种从选择字段中获取“id”的方法

我如何获取 id 以使此功能正常工作？

在这里我有选择:

          <SelectField
          id="category"
          floatingLabelText="Category"
          value={this.state.value}
          onChange={this.updateTask.bind(this)}
        >
          <MenuItem disabled={true} primaryText="Choose A Category" />
          <MenuItem value="delivery" primaryText="Delivery" />
          <MenuItem value="dog walking" primaryText="Dog Walking" />
          <MenuItem value="house cleaning" primaryText="House Cleaning" />
        </SelectField>

这是功能:

 updateTask(event, index, value) {
    event.preventDefault();
    let updated = Object.assign({}, this.state.task);
    updated[event.target.id] = event.target.value;
    this.setState({
      task: updated,
      value: value,
    });
  }

Answer 1

可悲的是，不可能将 JSON-Object 作为值传递给上述 Selects “onChange” 方法，或者 - 更好地说 - 这是可能的，但随后 MaterialUI 将存储在 MenuItem(现在是 JSON 对象)中的值注入(inject)到SelectMenu 的 textField - 因此它不显示任何内容，因为您无法更改值的显示方式。所以到目前为止，据我所知，只能通过 event.target.value 传递一个参数。如果您需要更多参数，例如索引，我确实是这样完成的:

在 Select 的 "onChange"属性中，接受两个参数:第一个是从中提取值的事件，第二个是被点击的子对象，如下所示:https://material-ui.com/api/select/

现在您可以通过 child.props.[yourVariable] 访问来自 event.target.value 的值以及访问子项(您首先定义的)的任何唯一属性。

在 MenuItem 的声明中；将您的 id 设置为 menuItem 的 Prop

 {this.state.availableDays.map((day, i) => {
        return (
              <MenuItem id={i} value={day.key}>{day.key}</MenuItem>
               )
   })}

在 Select 的“onChange”方法中；接受事件和 child 作为参数；访问 child.props.[yourVariable]

onChange={(event, child) => {this.setState({currentDayString: event.target.value, currentDayIndex: child.props.id}) ,this.displayDataForThisDay() }}

我确实意识到这个问题是在一年前提出的。但也许我的回答对任何寻找这个问题的答案的人都有帮助