好奇解决此问题的正确方法是:
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'));
显然,您可以创建单独的handleChange函数来处理每个不同的输入,但这不是很好。同样,您可以为单个输入创建一个组件,但是我想看看是否有办法做到这一点。
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'));
您可以使用该.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
建议在渲染时进行计算,因为这是推荐的操作。)
该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的2路数据绑定助手可以轻松实现您想要实现的目标。
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
您也可以这样做:
...
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>
)
}
您可以使用的特殊React
属性ref
,然后onChange
使用React
的getDOMNode()
功能来匹配实际的DOM节点:
handleClick: function(event) {
if (event.target === this.refs.prev.getDOMNode()) {
...
}
}
render: function() {
...
<button ref="prev" onClick={this.handleClick}>Previous question</button>
<button ref="next" onClick={this.handleClick}>Next question</button>
...
}
@Vigril Disgr4ce
对于多字段表单,使用React的关键功能(组件)是有意义的。
在我的项目中,我创建了TextField组件,这些组件至少具有一个值道具,并且它负责处理输入文本字段的常见行为。这样,您在更新值状态时不必担心跟踪字段名称。
[...]
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <input type="text" value={value} onChange={this.handleChange} />;
}
[...]
您可以input
通过创建一个单独的InputField
组件来管理单个孩子的价值来跟踪每个孩子的价值input
。例如,InputField
可能是:
var InputField = React.createClass({
getInitialState: function () {
return({text: this.props.text})
},
onChangeHandler: function (event) {
this.setState({text: event.target.value})
},
render: function () {
return (<input onChange={this.onChangeHandler} value={this.state.text} />)
}
})
现在,input
可以在该InputField
组件的单独实例中跟踪每个组件的值,而无需在父级状态下创建单独的值来监视每个子组件。
我将提供非常简单的解决方案。假设我们有两个输入username
和password
,但是我们希望我们的句柄简单而通用,因此我们可以重复使用它,而不必编写样板代码。
一,我们的表格:
<form>
<input type="text" name = "username" onChange={this.onChange} value={this.state.username}/>
<input type="text" name = "password" onChange={this.onChange} value={this.state.password}/>
<br></br>
<button type="submit">Submit</button>
</form>
II。我们想要保存username
和的构造函数,password
因此我们可以轻松地访问它们:
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
this.onSubmit = this.onSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
III。仅一个onChange
事件的有趣且“通用”的句柄基于此:
onChange(event) {
let inputName = event.target.name;
let value = event.target.value;
this.setState({[inputName]:value});
event.preventDefault();
}
让我解释:
1.检测到更改时onChange(event)
称为
2,然后我们得到该字段的名称参数及其值:
let inputName = event.target.name; ex: username
let value = event.target.value; ex: itsgosho
3,基于name参数,我们从构造函数的状态中获取我们的值,并使用以下值对其进行更新:
this.state['username'] = 'itsgosho'
4,这里要注意的关键是字段名称必须与状态中的参数匹配
希望我能以某种方式帮助某人:)
您的状态键应与输入字段的名称相同。然后,您可以在handleEvent方法中执行此操作;
this.setState({
[event.target.name]: event.target.value
});
您好,ssorallen的答案有所改善。您不需要绑定功能,因为您可以在没有输入的情况下访问输入。
var Hello = React.createClass({
render: function() {
var total = this.state.input1 + this.state.input2;
return (
<div>{total}<br/>
<input type="text"
value={this.state.input1}
id="input1"
onChange={this.handleChange} />
<input type="text"
value={this.state.input2}
id="input2"
onChange={this.handleChange} />
</div>
);
},
handleChange: function (name, value) {
var change = {};
change[name] = value;
this.setState(change);
}
});
React.renderComponent(<Hello />, document.getElementById('content'));
文章标签:javascript , jsx , reactjs
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!