Question

当我点击提交按钮时，获取select选项的vaule的最佳方法是什么？

我是否还需要在select选项中添加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

是的，您必须为.right p:not(:nth-child(4)){ background:yellow; }元素添加onChange处理程序。 Leo为您提供了答案，但可能并非最佳，因为每次事件触发时，都会创建一个新的回调。虽然在规模上你的应用程序可能不需要这种级别的优化。无论如何，我可能会重写从React.Component类扩展的东西：

select

我还简化了你的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;功能，但你可以实现这个但是你喜欢:)希望这会有所帮助！

Answer 2

我是否还需要在select选项中添加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>

Answer 3

我建议使用ref而不是state。

<select ref="imageType">
  <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>

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

使用React获取提交时的选择选项值

3 个答案: