如何在選擇下拉菜單中自動設置onChange事件中的setState，因爲當前僅當用戶單擊列表時觸發事件？

Question

目前，默認狀態爲空，並且僅在用戶單擊觸發onChange事件的下拉列表時更新。我如何製作，以便默認選擇的項目也設置爲狀態？所以默認情況下，第一個選項是在下拉菜單中選擇的，我想自動設置第一個選項。

this.state = { slug: '' } 

<select> 
    data && data.map((datum, i) => { return (
    <option 
     value={datum.id} 
     key={i} 
     onChange={e => this.setState({ slug: datum.slug })}> 
      {datum.name} 
    </option> 
    )})} 
<select> 

Answer 1

可以在狀態定義默認值 this.state = {蛞蝓： '零'}

然後告訴反應以設置在select

<select value={this.state.slug}> 
    <option value="zero">Zero</option> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
</select> 

該值如果你想以編程方式選擇第一個值，你可以寫這個。

<select> 
    data && data.map((datum, i) => { 
    const isSelected = this.state.slug === '' && i === 0; 
    return (
     <option 
      selected={isSelected} 
      value={datum.id} 
      key={i} 
      onChange={} 
     > 
      {datum.name} 
     </option> 
    )})} 
</selected> 

如果你希望你的狀態，以反映您的默認選項，你可以做的是，在組件的constructor。

constructor(props){ 
    super(props); 
    this.state = { 
     slug : this.props.data[0].id 
    } 
} 

之後，你可以使用之前辦理select組件我提到的解決方案之一。

如果經常更改data，則可以在componentWillReceiveProps而不是constructor的範圍內執行此操作，但它的想法是相同的。