如何在React中编辑多个输入控制的组件？

Question

我有一个将联系人对象存储为状态的组件-{firstName：“ John”，lastName：“ Doe”，电话：“
1234567890}我想创建一个表单来编辑此对象，但是如果我希望输入保留值对于原始的接触参数，我需要使每个输入成为受控组件，但是，由于状态仅保留{contact：{…}}，因此我不知道如何创建一个可以适应每个参数的handleChange函数。以下是我目前拥有的-

  getInitialState: function () {
    return ({contact: {}});
  },
  handleChange: function (event) {
    this.setState({contact: event.target.value });
  },
  render: function () {
    return (
        <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}/>
        </div>
      );
    }

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

  handleChange: function (event) {
    this.setState({contact.firstName: event.target.value });
  }

Answer 1

有一种“简单”的方式来执行此操作，又有一种“智能”的方式。如果您问我，以聪明的方式做事并不总是最好的，因为以后我可能会更难处理。在这种情况下，两者都是可以理解的。

旁注：我想请您考虑的一件事，是您需要更新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: functhtml" target="_blank">ion (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预设和react和插件stage-0与Babel一起转换代码。

下面是一些更新的示例，使用对象分解来从状态获取联系人，使用
扩散运算符创建一个更新的联系人对象，而不是对现有对象进行变异，通过扩展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是一个curried函数：使用调用它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>
    );
  }
}