很好奇接近这个的正确方法是:
var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ({this.state.total}); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = this.state.input1 + this.state.input2; this.setState({total: t}); } }); React.renderComponent(
, document.getElementById('content'));
显然你可以创建单独的handleChange函数来处理每个不同的输入,但这不是很好.类似地,您可以为单个输入创建一个组件,但我想看看是否有这样的方法.
我建议坚持使用像Elements name
上的标准HTML属性input
来识别您的输入.此外,您不需要将"total"保持为状态中的单独值,因为它可以通过在您的州中添加其他值来组合:
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'));
您可以使用该.bind
方法预先构建handleChange
方法的参数.它会是这样的:
var Hello = React.createClass({ getInitialState: function() { return {input1:0, input2:0}; }, render: function() { var total = this.state.input1 + this.state.input2; return ( <div>{total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange.bind(this, 'input1')} /> <input type="text" value={this.state.input2} onChange={this.handleChange.bind(this, 'input2')} /> </div> ); }, handleChange: function (name, e) { var change = {}; change[name] = e.target.value; this.setState(change); } }); React.renderComponent(<Hello />, document.getElementById('content'));
(我也是total
在渲染时计算的,因为这是建议的事情.)
你也可以这样做:
... constructor() { super(); this.state = { input1: 0, input2: 0 }; this.handleChange = this.handleChange.bind(this); } handleChange(input, value) { this.setState({ [input]: value }) } render() { const total = this.state.input1 + this.state.input2; return ( <div> {total}<br /> <input type="text" onChange={e => this.handleChange('input1', e.target.value)} /> <input type="text" onChange={e => this.handleChange('input2', e.target.value)} /> </div> ) }
该onChange
事件冒泡......所以,你可以这样做:
// A sample form render () { <form onChange={setField}> <input name="input1" /> <input name="input2" /> </form> }
并且您的setField方法可能如下所示(假设您使用的是ES2015或更高版本:
setField (e) { this.setState({[e.target.name]: e.target.value}) }
我在几个应用程序中使用类似的东西,它非常方便.
valueLink/checkedLink
从核心React 中弃用,因为它让一些用户感到困惑.如果您使用最新版本的React,此答案将无效.但如果你喜欢它,你可以通过创建自己的Input
组件轻松地模拟它
使用React的双向数据绑定助手可以更轻松地实现您想要实现的目标.
var Hello = React.createClass({ mixins: [React.addons.LinkedStateMixin], getInitialState: function() { return {input1: 0, input2: 0}; }, render: function() { var total = this.state.input1 + this.state.input2; return ( <div>{total}<br/> <input type="text" valueLink={this.linkState('input1')} />; <input type="text" valueLink={this.linkState('input2')} />; </div> ); } }); React.renderComponent(<Hello />, document.getElementById('content'));
容易吗?
http://facebook.github.io/react/docs/two-way-binding-helpers.html
你甚至可以实现自己的mixin