使用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获取选择选项值

回答

相关问题