小开

最佳答案

我建议坚持使用标准的 HTML 属性，比如 input元素上的 name来识别输入。此外，您不需要在状态中将“ 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'));

小开

废弃的解决方案

valueLink/checkedLink是不赞成从核心反应，因为它是混淆了一些用户。如果您使用的是最新版本的 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

你甚至可以实现自己的混合

小开

@ 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} />;
}


[...]

小开

可以使用 .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，因为这是建议做的事情。)

小开

您可以使用一个名为 ref的特殊 React属性，然后使用 React的 getDOMNode()函数匹配 onChange事件中的实际 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>
...
}

小开

你好已经改进了 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'));

小开

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})
}

我在几个应用程序中使用了类似的东西，它非常方便。

小开

您可以通过创建一个单独的 InputField组件来跟踪每个子 input的值，该组件管理单个 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} />)
}
})

现在可以在这个 InputField组件的单独实例中跟踪每个 input的值，而无需在父组件的状态中创建单独的值来监视每个子组件。

小开

你也可以这样做:

...
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>
)
}

小开

我将提供真正简单的问题解决方案。假设我们有两个输入 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>

我们的构造函数，我们想要保存我们的 username和 password，所以我们可以很容易地访问它们:

constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};


this.onSubmit = this.onSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}

只有一个 onChange事件的有趣和“通用”句柄是基于以下内容的:

onChange(event) {
let inputName = event.target.name;
let value = event.target.value;


this.setState({[inputName]:value});




event.preventDefault();
}

让我解释一下:

1. 当检测到变化时，调用 onChange(event)

然后得到字段的 name 参数及其值:

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
});

小开

如果有人在寻找 功能组件的例子,

import React, { useState } from "react";


export default function Exapmle() {


const [userState, setUserState] = useState({
firstName: "",
lastName: ""
})


const handleChange = (e)=>{
const value = e.target.value;
setUserState({
...userState,
[e.target.name]: value
});
}


return (
<form>


<label>
First name
<input type="text" name="firstName" value={userState.firstName}
onChange={handleChange}
/>
</label>


<label>
Last name
<input type="text" name="lastName" value={userState.lastName}
onChange={handleChange}
/>
</label>


</form>
);
}

小开

状态对象状态对象

const [values, setValues] = useState({
email: "",
password: "",
});

改变状态的函数

const handleChange = name => event => {
setValues({ ...values, [name]: event.target.value });
};

以“ name”调用上面的函数

<input
onChange={handleChange("email")}
value={email}
className="form-control"
type="email"
/>

Js: 用一个 onChange 处理程序标识不同的输入

废弃的解决方案

旧答案内容: