Reactjs + MaterialUI：SelectField事件處理

我試圖通過ReactJS和MaterialUI構建我的網站。具體來說，我試圖建立一個SelectField的表格。它看起來非常容易，但是當我試圖使它成爲受控組件時，我陷入了困境。我只是希望每當用戶在下拉列表中選擇一個項目時，該項目將變爲選擇字段的value。Reactjs + MaterialUI：SelectField事件處理

渲染的選擇字段是這樣的（websites是一個字符串數組）：

<SelectField floatingLabelText="Website" onChange={(evt) => this.websiteDidChange(evt)} value={this.state.website} > 
      {websites.map(function(w, index){ 
       return <MenuItem key={index} label={w} value={w}>{w}</MenuItem>; 
      })} 
</SelectField>

和函數其中I處理onChange事件是：

websiteDidChange(evt) { 
    this.setState({ 
     website: evt.target.value 
    }); 
    }

Unofrtunately，當我選擇一個項目，evt.target.value結果未定義。任何人都可以看到我錯過了什麼？我應該使用該活動的其他房產嗎？我無法從文檔中弄清楚。

來源

2016-02-13 Nicola Miotto

我自己找到了答案：顯然onChange回調接收兩個參數：事件和新選擇的索引。所以我更新的代碼如下圖所示，它的工作原理：

websiteDidChange(newIndex) { 
    this.setState({ 
    website: websites[newIndex] 
    }); 
} 

... 

<SelectField floatingLabelText="Website" onChange={(evt, newIndex) => this.websiteDidChange(newIndex)} value={this.state.website} > 
      {websites.map(function(w, index){ 
       return <MenuItem key={index} label={w} value={w}>{w}</MenuItem>; 
      })} 
</SelectField>

來源

2016-02-13 11:59:14

顯然，的onChange函數接收所選擇的值作爲第三個參數，所以你可能會直接使用。

來源

2017-04-18 05:14:02

感謝它解決了我的問題 –

是，第三事件是有效負載值根據文檔：當選擇的菜單項

http://www.material-ui.com/#/components/select-field

回調函數燒製。事件：以所選菜單項爲目標的TouchTap事件。返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首返回頁首鍵：所選菜單項的索引，如果多個爲真，則爲undefined。有效負載：如果多個爲真，則菜單的值數組與菜單項的值相加（如果尚未選擇）或省略（如果已選擇）。否則，該菜單項的值。

例子：

<SelectField 
      value={this.props.someValue} 
      onChange={(evt, key, payload)=>console.log(payload)} 
     >

來源

2017-08-31 22:41:41

Reactjs + MaterialUI：SelectField事件處理

回答

相關問題