如何在事件[自动完成]组件中获取'名称'

Question

我有处理程序fn用于处理来自文本字段的处理。

我想将其用于自动完成组件，但我无法从中获取'名称'和值。

function handlerChange(e){ 
const { name, value, checked } = e.target;
  return { name, value: value || checked };
}

 <Autocomplete
    id="distributions"
    name="defaultDistr"
    options={distributions}
    getOptionLabel={distribution => distribution}
    inputValue={defaultDistr}
    defaultValue={defaultDistr}
    onChange={(e, value) => {
      console.log('e', e, 'value', value);
    }}
    renderInput={params => (
      <TextField
        {...params}
        name="defaultDistr"
        label="distributions"
        margin="normal"
        fullWidth
      />
    )}
  />

Answer 1

对于Autocomplete，有许多不同的事件可能导致值更改。这些事件可能来自多种不同的元素，因此您不能依靠事件的目标来获取名称。同样，事件的目标不一定有一个值，即使有，该值也可能不代表Autocomplete的当前值。这就是将正确的值作为第二个参数传递给onChange处理程序的原因。

假设handlerChange中的代码比您显示的要重要，因此值得重用，您可以执行如下所示的操作，以创建一个新对象，将信息组织到处理程序期望的结构中。

<Autocomplete onChange={(event, value)=> { handlerChange({target: {name: "defaultDistr", value: value}})} .../>