使用React獲取選擇選項值

當我點擊提交按鈕時，獲得選擇選項的最佳方式是什麼？使用React獲取選擇選項值

我需要爲選擇選項添加onChange嗎？

var UIPrintChart = React.createClass({ 
    getInitialState: function() { 
     return { 
      value: 'PNG' 
     } 
    }, 
    handlePrint(event) { 
     if (this.state.value == 'PNG') { 
      console.log('Hello PNG'); 
     } 
     if (this.state.value == 'JPEG') { 
      console.log('Hello JPEG'); 
     } 
     if (this.state.value == 'PDF') { 
      console.log('Hello PDF'); 
     } 
     if (this.state.value == 'SVG') { 
      console.log('Hello SVG'); 
     } 
    }, 
    render() { 
     return (
      <div> 
       <select> 
        <option value="PNG">PNG Image</option> 
        <option value="JPEG">JPEG Image</option> 
        <option value="PDF">PDF Document</option> 
        <option value="SVG">SVG Vector Image</option> 
       </select> 
       <button className="uk-button uk-button-mini" onClick={this.handlePrint}>Export Chart</button> 
      </div> 
      ) 
    } 
});

來源

2016-11-28 user1177860

可能重複的[React - 訪問按鈕單擊選定的選項？]（http://stackoverflow.com/questions/29761194/react-accessing-selected-option-on-button-click） – duwalanise

是的，你必須添加一個onChange處理程序select元素。利奧爲你提供了一個答案，但可能並不是最佳的，因爲每次事件發生時都會產生新的回調。儘管在規模上你的應用可能不需要這種優化級別。無論如何，我可能會改寫的東西從React.Component類擴展：

import React from 'react'; 

class UIPrintChart extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: 'PNG' 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    this.handlePrint = this.handlePrint.bind(this); 
    } 

    handlePrint() { 
    if (this.state.value) { 
     console.log(this.state.value); 
    } 
    } 

    handleChange(e) { 
    this.setState({ value: e.target.value }); 
    } 

    render() { 
    return (
     <div> 
     <select onChange={this.handleChange}> 
      <option value="PNG">PNG Image</option> 
      <option value="JPEG">JPEG Image</option> 
      <option value="PDF">PDF Document</option> 
      <option value="SVG">SVG Vector Image</option> 
     </select> 
     <button className="uk-button uk-button-mini" onClick={this.handlePrint}>Export Chart</button> 
     </div 
    ); 
    } 
} 

export default UIPrintChart;

我還簡化了您的handlePrint功能，但是這個但是你喜歡:)希望這有助於你可以實現！

來源

2016-11-28 13:33:42

我是否需要一個onchange添加到選擇的選項呢？

是，像這樣：

<select onChange={(e) => this.setState({ value: e.target.value })}> 
    <option value="PNG">PNG Image</option> 
    <option value="JPEG">JPEG Image</option> 
    <option value="PDF">PDF Document</option> 
    <option value="SVG">SVG Vector Image</option> 
</select>

來源

2016-11-28 13:13:36 lustoykov

Upvoted - 我也有給出一個在性能方面稍微更優的答案，但是你的答案在技術上也是正確的:) –

好點，upvoted你也是;-) – lustoykov

使用React獲取選擇選項值

回答

相關問題