当我更改选择时，我收到：'在 <select> 上使用 `defaultValue` 或 `value` 道具，而不是在 <option> 上设置 `selected`答案

【问题标题】：When i change the select i receive: 'Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>'当我更改选择时，我收到：'在 <select> 上使用 `defaultValue` 或 `value` 道具，而不是在 <option> 上设置 `selected`
【发布时间】：2020-02-28 19:38:31
【问题描述】：

我有这个材质选择组件：

<FormControl fullWidth variant="outlined" className={classes.formControl}>
  <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
    Filial
  </InputLabel>
  <Select
    onChange={handleChange}
    onBlur={handleBlur}
    error={touched.filial && Boolean(errors.filial)}
    value={values.filial}
    defaultValue={'DEFAULT'}
    inputProps={{
      name: 'filial',
      id: 'outlined-filial-native-simple',
    }}
  >
    <option value="DEFAULT" disabled>Choose a salutation ...</option>
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
    <option value={30}>Thirty</option>
  </Select>
</FormControl>

当我更改所选选项时，我收到：

index.js:1 警告：使用 defaultValue 或 value 道具代替选择的设置

我正在使用 formik 来处理我的表单：

const enhanceWithFormik = withFormik({
  mapPropsToValues: () => ({ email: '', password: '', filial: '' }),
  handleSubmit: values => {
    console.log(values)
  },
  isInitialValid: false,
  validateOnChange: true,
  validateOnBlur: true,
  displayName: 'MyForm',
  validationSchema: schema
})

当我填写表单字段并单击提交按钮时，会正确打印我在表单中选择的 filial 的值，但会在我的控制台中抛出此错误。

我该如何解决这个问题？

【问题讨论】：

这是一个警告，而不是错误。如果你愿意，你可以忽略它。我没有使用formik 的经验，但也许它会以某种方式自动设置selected 道具？我所知道的是您同时设置了value 和defaultValue。你应该只使用一个。
它建议您直接传递 Selectable 数组中的一项，而不是在选项中设置默认标签

标签： reactjs material-ui formik

【解决方案1】：

我遇到了同样的事情，现在我解决了。我没有在我的项目中使用 formik，但以下与我的方法类似，希望对您有所帮助。

首先，在您的<Select> 标签中，您同时拥有value 和defaultValue。但只要拥有其中一个就可以了。（注意您收到的警告说“使用defaultValue 或value 道具”）。在您的情况下，假设您将删除 defaultValue 并保留 value。

现在，确保将values.filial 设置为'DEFAULT'，因此value={values.filial} 表示初始值为'DEFAULT'，下拉菜单最初将显示Choose a salutation ...

handleChange 函数应在下拉选择更改时重新渲染组件。

【讨论】：