通过 React 状态管理多个表单输入及其值

Question

让我从一个例子开始，这样你们就可以知道问题是什么以及我想要实现什么。

在我的项目中，我将在同一页面上有多个用户表单，并且表单的数量将是动态的（取决于用户数量，如果有 3 个用户，则为 3 个表单，如果有 10 个用户，则为 10 个表单等）。

假设所有表单都有 3 个字段（此处保持简单），例如 firstName 、 middleName 、 lastName。

现在假设我们有 3 个用户，因此页面上会出现 3 个输入。

<form>
  <input type="text" name="firstName" value="" />
  <input type="text" name="middleName" value="" />
  <input type="text" name="lastName" value="" />
</form>

这次我们有 3 个用户，所以上面的表格会出现 3 次。实际上，这里我只为所有 3 个用户采用了一种形式。我所做的如下所示。

<form>
  for (let i = 1; i <= 3; i++) {
   <input type="text" name="firstName" value="" />
   <input type="text" name="middleName" value="" />
   <input type="text" name="lastName" value="" />
  }
  <input type="submit" value="Submit">Apply</button>
</form>

当用户提交表单时，我希望每个表单字段都有一个值数组。

下面是我想要的结果和方式。

['tome hanks' , 'shahrukh khan', 'john'] // 所有 3 个用户的名字

['tome hanks' , 'shahrukh khan', 'john'] // 所有 3 个用户的中间名

['tome hanks' , 'shahrukh khan', 'john'] // 所有 3 个用户的姓氏

我已经尝试过this tutorial，但不是我需要的。

也许我可以使用 React 状态来实现这一点，但不知道怎么做？

如果 Redux 有帮助，那对我来说没问题。

Answer 1

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { firstName: 'John1', middleName: 'Daniel1', lastName: 'Paul1' },
        { firstName: 'John2', middleName: 'Daniel2', lastName: 'Paul2' },
        { firstName: 'John3', middleName: 'Daniel3', lastName: 'Paul3' },
        { firstName: 'John4', middleName: 'Daniel4', lastName: 'Paul4' },
      ],
    };
  }

  _onChangeUser = (index, field, event) => {
    const newValue = event.target.value;
    this.setState(state => {
      const users = [
        ...state.users.slice(0, index),
        {
          ...state.users[index],
          [field]: newValue,
        },
        ...state.users.slice(index + 1),
      ];
      return {
        users,
      };
    });
  };

  _onSubmit = event => {
    event.preventDefault();
    // Do something with this.state.users.
    console.log(this.state.users);
  };

  render() {
    return (
      <div className="App">
        <form onSubmit={this._onSubmit}>
          {this.state.users.map((user, index) => (
            <div key={index}>
              <input
                value={user.firstName}
                onChange={this._onChangeUser.bind(this, index, 'firstName')}
              />
              <input
                value={user.middleName}
                onChange={this._onChangeUser.bind(this, index, 'middleName')}
              />
              <input
                value={user.lastName}
                onChange={this._onChangeUser.bind(this, index, 'lastName')}
              />
            </div>
          ))}
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"><div>

Answer 2

好的。将您的状态变量声明为数组。下面应该满足您的要求。

 constructor(props){
    super(props)
    this.state={
         firstNameArray:[],
         middleNameArray:[],
         lastNameArray:[],
         fName:” “,
         mName:””,
         lName:””
    }

   this.changeFirstName = this.changeFirstName.bind(this);
   this.changeMiddleName=             this.changeMiddleName.bind(this);
   this.changeLastName=this.changeLastName.bind(this);
   }

   changeFirstName(event){
   this.setState({
          firstNameArray:event.target.value,
          fName: event.target.value
   })

   changeMiddleName(event){
   this.setState({
   middleNameArray: event.target.value,
   mName: event.target.value
   })
  }

  changeLastName(event){
  this.setState({
   lastNameArray: event.target.value,
   lName: event.target.value
   })

在输入字段中调用每个函数，如下所示

    <input type=‘text’ name=‘fName’ value=    {this.state.fName} onChange={this.changeFirstName} />

对其他两个输入字段也以相同的方式执行此操作。希望这能回答您的问题。