javascript - React 中的受控选择未设置 defaultValue

Question

我有一个 React 组件，它呈现 3 个选择元素。我想为所有 3 个设置默认值，但当我尝试这样做时，它不起作用。

我使用传入的名为 type 的属性来区分每一个。类型是每个选择元素的名称。我的 defaultV 正在注销所有 3 个选择元素所需的正确值。但是当它们渲染时，defaultValue 没有被设置。开始时的 defaultValue 为空，但是当我进入应用程序中的编辑模式时，将为所有 3 个添加 defaultV，但由于某种原因，defaultValue 没有为每个渲染设置它。我想知道它是否会被之前的渲染覆盖，因为它渲染了 3 次？我怎样才能阻止这种情况呢。

代码

  const defaultV = data.value[type];

  <select
    onChange={onHandleChange}
    id={`${pre}${type}`}
    name={`${pre}${type}`}
    defaultValue={{ label: type, value: defaultV }}
  >
    <option value="" hidden invalid="true">{type}</option>
    {
      dates[type]().map(date => <option key={date}>{date}</option>)
    }
  </select> 

Answer 1

您可以直接将默认值传递给 select 标记。

请引用以下代码:

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'lime'};
  }

  render() {
    return (
      <form>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
       </form>
    );
  }
}

在你的情况下，它会是这样的，

const defaultV = data.value[type];

  <select
    onChange={onHandleChange}
    id={`${pre}${type}`}
    name={`${pre}${type}`}
    value={defaultV}
  >
    <option value="" hidden invalid="true">{type}</option>
    {
      dates[type]().map(date => <option key={date} value={date}>{date}</option>)
    }
  </select>