当我更改选择时，我收到：&#39;使用 `defaultValue` 或 `value` 道具<select>而不是设置`selected`<option> &#39;

Question

我有这个材料选择组件：

<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 props on 而不是设置 selected on

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

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

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

我该如何解决这个问题？

Answer 1

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

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

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

然后，随着下拉选择的更改，handleChange 函数应重新渲染组件。