React.js:使用一个 onChange 处理程序识别不同的输入 [英] React.js: Identifying different inputs with one onChange handler

问题描述

想知道解决这个问题的正确方法是什么:

var Hello = React.createClass({getInitialState:函数(){返回 {total: 0, input1:0, input2:0};},渲染:函数(){返回 (<div>{this.state.total}<br/><input type="text" value={this.state.input1} onChange={this.handleChange}/><input type="text" value={this.state.input2} onChange={this.handleChange}/>

);},handleChange:函数(e){this.setState({ ??? : e.target.value});t = this.state.input1 + this.state.input2;this.setState({total: t});}});React.renderComponent(, document.getElementById('content'));

显然，您可以创建单独的 handleChange 函数来处理每个不同的输入，但这不是很好.同样，您可以为单个输入创建一个组件，但我想看看是否有办法做到这一点.

解决方案

我建议坚持使用标准的 HTML 属性，例如 name 在 input 元素上以识别您的输入.此外，您不需要将total"作为单独的值保留在 state 中，因为它可以通过在您的 state 中添加其他值来组合:

var Hello = React.createClass({getInitialState:函数(){返回{输入1:0，输入2:0}；},渲染:函数(){const total = this.state.input1 + this.state.input2;返回 (<div>{总计}<br/><input type="text" value={this.state.input1} name="input1" onChange={this.handleChange}/><input type="text" value={this.state.input2} name="input2" onChange={this.handleChange}/>

);},handleChange:函数(e){this.setState({[e.target.name]: e.target.value});}});React.renderComponent(, document.getElementById('content'));

Curious what the right way to approach this is:

var Hello = React.createClass({
getInitialState: function() {
    return {total: 0, input1:0, input2:0};
},
render: function() {
    return (
        <div>{this.state.total}<br/>
            <input type="text" value={this.state.input1} onChange={this.handleChange} />
            <input type="text" value={this.state.input2} onChange={this.handleChange} />
        </div>
    );
},
handleChange: function(e){
    this.setState({ ??? : e.target.value});
    t = this.state.input1 + this.state.input2;
    this.setState({total: t});
}
});

React.renderComponent(<Hello />, document.getElementById('content'));

Obviously you could create separate handleChange functions to handle each different input, but that's not very nice. Similarly you could create a component just for an individual input, but I wanted to see if there's a way to do it like this.

解决方案

I suggest sticking to standard HTML attributes like name on input Elements to identify your inputs. Also, you don't need to keep "total" as a separate value in state because it is composable by adding other values in your state:

var Hello = React.createClass({
    getInitialState: function() {
        return {input1: 0, input2: 0};
    },
    render: function() {
        const total = this.state.input1 + this.state.input2;

        return (
            <div>{total}<br/>
                <input type="text" value={this.state.input1} name="input1" onChange={this.handleChange} />
                <input type="text" value={this.state.input2} name="input2" onChange={this.handleChange} />
            </div>
        );
    },
    handleChange: function(e) {
        this.setState({[e.target.name]: e.target.value});
    }
});

React.renderComponent(<Hello />, document.getElementById('content'));

这篇关于React.js:使用一个 onChange 处理程序识别不同的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！