有一种“简单”的方法可以做到这一点，还有一种“聪明”的方法。如果你问我，以聪明的方式做事并不总是最好的，因为以后可能更难和我一起工作。在这种情况下，两者都是可以理解的。
旁注：我要请您考虑的一件事是，您是否需要更新contact对象，或者您可以firstName直接将等保持在状态上？也许你有很多组件状态的数据？如果是这种情况，最好将其分成具有更窄职责的较小组件。
“简单”的方式
changeFirstName: function (event) {
const contact = this.state.contact;
contact.firstName = event.target.value;
this.setState({ contact: contact });
},
changeLastName: function (event) {
const contact = this.state.contact;
contact.lastName = event.target.value;
this.setState({ contact: contact });
},
changePhone: function (event) {
const contact = this.state.contact;
contact.phone = event.target.value;
this.setState({ contact: contact });
},
render: function () {
return (
<div>
<input type="text" onChange={this.changeFirstName.bind(this)} value={this.state.contact.firstName}/>
<input type="text" onChange={this.changeLastName.bind(this)} value={this.state.contact.lastName}/>
<input type="text" onChange={this.changePhone.bind(this)} value={this.state.contact.phone}/>
</div>
);
}
“聪明”的方式
handleChange: function (propertyName, event) {
const contact = this.state.contact;
contact[propertyName] = event.target.value;
this.setState({ contact: contact });
},
render: function () {
return (
<div>
<input type="text" onChange={this.handleChange.bind(this, 'firstName')} value={this.state.contact.firstName}/>
<input type="text" onChange={this.handleChange.bind(this, 'lastName')} value={this.state.contact.lastName}/>
<input type="text" onChange={this.handleChange.bind(this, 'phone')} value={this.state.contact.lastName}/>
</div>
);
}
更新：使用 ES2015+ 的相同示例
本节包含与上述相同的示例，但使用 ES2015+ 的功能。
要在浏览器中支持以下功能，您需要使用Babel转译您的代码，例如使用预设es2015和react以及插件stage-0。
下面是更新的例子，使用对象解构从状态中获取联系，
传播操作符创建一个更新的联系对象而不是改变现有的对象，通过扩展React.Component将组件创建为类，并使用箭头函数创建回调，所以我们不必。bind(this)
“简单”的方式，ES2015+
class ContactEdit extends React.Component {
changeFirstName = (event) => {
const { contact } = this.state;
const newContact = {
...contact,
firstName: event.target.value
};
this.setState({ contact: newContact });
}
changeLastName = (event) => {
const { contact } = this.state;
const newContact = {
...contact,
lastName: event.target.value
};
this.setState({ contact: newContact });
}
changePhone = (event) => {
const { contact } = this.state;
const newContact = {
...contact,
phone: event.target.value
};
this.setState({ contact: newContact });
}
render() {
return (
<div>
<input type="text" onChange={this.changeFirstName} value={this.state.contact.firstName}/>
<input type="text" onChange={this.changeLastName} value={this.state.contact.lastName}/>
<input type="text" onChange={this.changePhone} value={this.state.contact.phone}/>
</div>
);
}
}
“智能”方式，ES2015+
请注意，这handleChangeFor是一个柯里化函数：使用 a 调用它propertyName会创建一个回调函数，该函数在调用时会更新状态[propertyName]中的（新）联系人对象。
class ContactEdit extends React.Component {
handleChangeFor = (propertyName) => (event) => {
const { contact } = this.state;
const newContact = {
...contact,
[propertyName]: event.target.value
};
this.setState({ contact: newContact });
}
render() {
return (
<div>
<input type="text" onChange={this.handleChangeFor('firstName')} value={this.state.contact.firstName}/>
<input type="text" onChange={this.handleChangeFor('lastName')} value={this.state.contact.lastName}/>
<input type="text" onChange={this.handleChangeFor('phone')} value={this.state.contact.lastName}/>
</div>
);
}
}