Question

我在页面上动态创建输入字段，以便将新用户添加到联系簿。对于我使用on click事件创建的每个用户，我将一个新的用户对象附加到一个数组。然后，此对象将放置在其属性中的动态状态，因此我可以使用我创建的输入字段更新每个设置这些项的值。但是，我无法访问或更改users数组中的对象。我该怎么做才能解决这个问题？

appendUser() {
  let usersLength = this.state.users.length;
  let newUser = {
    name : '',
    age : '',
    birthday : '',
  };

  this.setState({ users: this.state.users.concat([newUser]) });  

  for (let i = 0; i < usersLength; i++) {
    updateItem(i, this.state.users[i] = {
        name : this.state.users[i].name,
        age : this.state.users[i].age,
        birthday : this.state.users[i].birthday,
      }
    )    
  }

}

updateItem(id, itemAttributes) {
  let index = this.state.users.findIndex(x => x.id === id);
  if (index === -1) {
    console.error('error in update')
  } else {
    this.setState({
      users: [
       ...this.state.users.slice(0,index),
       Object.assign({}, this.state.users[index], itemAttributes),
       ...this.state.users.slice(index+1)
      ]
    });
  }
}

我的输入表单组件，它在点击时创建字段：

render() {
  return (
    <div>
      {this.props.users.map((user, index) =>
        <formgroup key={index}>
          <input name={'name'} type="string" onChange={this.props.handleChange} value={this.props.name} required />
          <input name={'age'} type="string" onChange={this.props.handleChange} value={this.props.age} required />
          <input name={'birthday'} type="string" onChange={this.props.handleChange} value={this.props.birthday} required />
        </formgroup>
      )}
        <button onClick={ this.props.appendUser }>Add Another User</button>
    </div>
  )
}

和handleChange函数

  handleChange(e) {
    this.setState({[e.target.name]: e.target.value})
  }

REACT - 在数组中映射不可变动态

0 个答案: