如何在 React 中编辑多个输入控制组件? [英] How do I edit multiple input controlled components in React?

问题描述

我有一个组件将联系人对象存储为状态 - {firstName: "John", lastName: "Doe", phone: "1234567890} 我想创建一个表单来编辑这个对象，但如果我想要输入保持原始接触参数的值，我需要让每个输入成为一个受控组件.但是，我不知道如何创建一个可以调整每个参数的handleChange函数，因为我的状态只持有{contact: {...}}. 以下是我目前拥有的 -

 getInitialState: function () {返回({联系:{}})；},handleChange:函数(事件){this.setState({contact: event.target.value });},渲染:函数(){返回 (<div><input type="text" onChange={this.handleChange} value={this.state.contact.firstName}/><input type="text" onChange={this.handleChange} value={this.state.contact.lastName}/><input type="text" onChange={this.handleChange} value={this.state.contact.lastName}/>

);}

我希望在我的 handleChange 中我可以做类似的事情

 handleChange:函数(事件){this.setState({contact.firstName: event.target.value });}

解决方案

有一种简单"的方法可以做到这一点，还有一种智能"的方法.如果你问我，以聪明的方式做事并不总是最好的，因为以后可能更难和我一起工作.在这种情况下，两者都是可以理解的.

旁注:我要请您考虑的一件事是您是否需要更新 contact 对象，或者您可以直接保留 firstName 等在状态?也许你有很多组件状态的数据?如果是这种情况，最好将其拆分为更小的职责范围更小的组件.

简单"的方式

 changeFirstName: function (event) {const 联系 = this.state.contact;contact.firstName = event.target.value;this.setState({联系:联系});},更改姓氏:函数(事件){const 联系 = this.state.contact;contact.lastName = event.target.value;this.setState({联系:联系});},更改电话:功能(事件){const 联系 = this.state.contact;contact.phone = event.target.value;this.setState({联系:联系});},渲染:函数(){返回 (<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}/>

);}

聪明"的方式

 handleChange: function (propertyName, event) {const 联系 = this.state.contact;联系[属性名称] = event.target.value;this.setState({联系:联系});},渲染:函数(){返回 (<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}/>

);}

更新:使用 ES2015+ 的相同示例

本节包含与上述相同的示例，但使用 ES2015+ 的功能.

要在浏览器中支持以下功能，您需要使用 Babel 使用例如转译您的代码预设 es2015 和 反应，和插件 stage-0.

以下是更新的示例，使用对象解构 从国家获得联系方式，传播运算符创建一个更新的联系人对象而不是改变现有的对象，通过类创建组件扩展 React.Component，并使用 箭头功能创建回调，这样我们就不必bind(this).

简单"的方式，ES2015+

class ContactEdit extends React.Component {changeFirstName = (事件) =>{const { 联系 } = this.state;const newContact = {...接触，名字:事件.目标.值};this.setState({ 联系人: newContact });}changeLastName = (事件) =>{const { 联系 } = this.state;const newContact = {...接触，姓氏:事件.目标.值};this.setState({ 联系人: newContact });}changePhone = (事件) =>{const { 联系 } = this.state;const newContact = {...接触，电话:event.target.value};this.setState({ 联系人: newContact });}使成为() {返回 (<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}/>

);}}

智能"方式，ES2015+

请注意，handleChangeFor 是一个 柯里化函数:使用 propertyName 调用它会创建一个回调函数，该函数在调用时更新 [propertyName](新)状态中的联系人对象.

class ContactEdit extends React.Component {handleChangeFor = (propertyName) =>(事件) =>{const { 联系 } = this.state;const newContact = {...接触，[属性名称]:事件.目标.值};this.setState({ 联系人: newContact });}使成为() {返回 (<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}/>