React Autocomplete组件：如何在onChange中仅传value而非event？

Material-UI的Autocomplete组件onChange回调的参数是固定顺序的：第一个参数是事件对象，第二个才是选中的value。你之前直接写(value) => this.onSelect(value)时，这个value实际接收的是第一个参数（事件对象），所以才会出现传入SyntheticEvent的情况。

解决方法很简单，显式忽略第一个事件参数，只传递第二个value参数即可：

方案1：显式接收并忽略event #

修改Autocomplete的onChange属性：

<Autocomplete
  // 其他属性保持不变
  onChange={(event, value) => this.onSelect(value)}
/>

同时更新onSelect方法，只接收value参数：

private onSelect(value: GeviUnCombi) {
  this.props.functies.create(value);
}

方案2：用下划线标记未使用的参数（TypeScript推荐） #

如果使用TypeScript，可以用_明确表示不需要第一个参数，代码可读性更强：

<Autocomplete
  // 其他属性保持不变
  onChange={(_, value) => this.onSelect(value)}
/>

对应的onSelect方法同样只接收value参数即可。

修改后的完整组件示例 #

class Koppel extends Component<PropsType, State> {
  constructor(props: PropsType) {
    super(props);

    this.state = {
      geviUnCombis: new Array<GeviUnCombi>()
    };
  }

  public render() {
    const { classes } = this.props;

    return (
      <div className={classes.autoSuggest}>
        <Autocomplete
          ListboxProps={{ style: { maxHeight: 200, overflow: 'auto' } }}
          disablePortal
          autoHighlight={true}
          options={this.props.geviUnCombis}
          onChange={(_, value) => this.onSelect(value)}
          getOptionLabel={(geviUnCombi) => (geviUnCombi.geviCode ? geviUnCombi.geviCode : "") + "/" + geviUnCombi.unCode}
          renderInput={(input) => <TextField {...input} label="Type"/>}
        />
      </div>
    );
  }

  private onSelect(value: GeviUnCombi) {
    this.props.functies.create(value);
  }
}

内容的提问来源于stack exchange，提问作者JasperMW