React中的受控選擇未設置defaultValue

Question

我有一個React組件，可以渲染3個select元素。 我想為所有3個設置默認值，但是當我嘗試這樣做時它不起作用。

我使用一種傳入的prop（類型）來區分每個對象。 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>