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} />

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

通过React状态

2 个答案: