如何在Formik配合Material-UI的可复用Autocomplete组件中获取选中对象

问题原因 #

你封装的NewAutocomplete组件中重写了MuiAutocomplete的onChange事件，没有调用从父组件传入的onChange回调，所以表单中给Field绑定的onChange不会触发。同时你已经将选中值存入了Formik的状态中，也可以直接从Formik暴露的状态里取值。

解决方案 #

方案1：让父组件传入的onChange回调生效 #

修改NewAutocomplete组件的onChange逻辑，在更新Formik状态后调用传入的回调：

// NewAutocomplete组件内的MuiAutocomplete onChange部分
onChange={(e, value) => {
  form.setFieldValue(field.name, value);
  // 新增：调用父组件传入的onChange
  if (props.onChange) {
    props.onChange(e, value);
  }
}}

修改完成后，你在表单中给Field绑定的onChange就能正常打印选中的对象了。

方案2：直接从Formik状态取值（更推荐） #

你已经将选中值同步到了Formik的状态中，不需要额外绑定回调，直接从Formik的render函数参数里的values就能拿到：

1. 首先在Formik的render参数中新增values：

{function Render({ errors, touched, isSubmitting, setFieldValue, values }) {
  // 这里直接打印就能拿到选中的film对象
  console.log('当前选中的电影：', values.film)
  return (
    <Form id="form">
      {/* 其余代码不变 */}
      {/* 提交时直接取values即可获取所有表单值 */}
      <Button type="submit" variant="contained" color="primary">
        提交
      </Button>
    </Form>
  )
}}

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