Question

我有一个React组件，可以渲染3个select元素。我想为所有3个设置默认值，但是当我尝试这样做时它不起作用。

我使用传入的称为type的道具区分每个对象。 Type是每个选择元素的名称。我的defaultV正在注销所有3个select元素所需的正确值。但是当它们渲染时，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>

React中的受控选择未设置defaultValue

1 个答案: