Reactで送信時に選択オプション値を取得

Question

反応中の送信ボタンをクリックしたときに選択オプションのvauleを取得する最善の方法は何ですか？

また、選択オプションに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> 
      ) 
    } 
}); 

Answer 1

うん、あなたはselect要素のonChangeハンドラを追加する必要があります。レオはあなたに答えを出しましたが、イベントが発生するたびに新しいコールバックが作成されるため、おそらく最適ではありません。スケールでは、あなたのアプリはおそらくこのレベルの最適化を必要としません。私はまた、あなたのhandlePrint機能を簡素化

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; 

ますが、このしかし、あなたは、この情報がお役に立てば幸い:)好き実装することができます：とにかく、私はおそらくReact.Componentクラスから拡張するために、物事を書き換えるだろう！

Answer 2

私も選択オプションにの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>