管理多个表单输入及其通过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位用户的姓氏

我已经尝试过本教程，但并不是我真正需要的。

也许我可以使用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} />

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