React中如何从多个同类型输入框取值并动态维护状态

你现在的问题核心是要把单个邮箱的状态改成数组形式存储，让每个输入框对应数组里的一个独立元素，这样就能分别维护每个输入框的值了。我给你一步步调整代码：

第一步：修改初始状态 #

把原来的单个email字段改成数组emails，同时可以去掉addOneMoreEmail和emailCounter——数组的长度就是输入框的数量，不需要额外计数器。如果需要初始显示3个输入框，就给数组初始化3个空字符串：

state = {
  emails: ['', '', ''] // 初始3个输入框，可按需调整
};

第二步：更新handleChange方法 #

现在需要针对数组的索引来更新对应位置的邮箱值，注意要先拷贝原数组（避免直接修改状态），再更新对应索引的元素：

handleChange = index => event => {
  // 拷贝原数组，不直接修改状态
  const updatedEmails = [...this.state.emails];
  // 更新对应索引的邮箱值
  updatedEmails[index] = event.target.value;
  this.setState({ emails: updatedEmails });
};

第三步：修改addMemberHandler方法 #

点击添加按钮时，往emails数组里追加一个空字符串，这样渲染时就会多一个输入框。用函数式setState能确保拿到最新的状态值，避免异步更新的问题：

addMemberHandler = () => {
  this.setState(prevState => ({
    emails: [...prevState.emails, ''] // 追加空字符串作为新输入框的初始值
  }));
};

第四步：重构render方法 #

不再写死输入框，而是通过map循环渲染emails数组里的每个元素，每个输入框绑定对应的数组索引、值和变更事件：

render() {
  const { classes } = this.props;
  return (
    <div>
      {this.state.emails.map((email, index) => (
        <TextField
          key={index} // 必须给列表项加唯一key，这里用索引足够
          value={email}
          className={classes.textField}
          onChange={this.handleChange(index)}
          placeholder="Enter email address"
          type="email" // 加上email类型，增强用户体验
        />
      ))}
      <p onClick={this.addMemberHandler}> ADD MORE EMAIL ADDRESSES</p>
    </div>
  );
}

完整组件示例 #

把所有修改整合起来，还可以加一个提交方法，展示如何获取所有邮箱数组：

class EmailCollector extends React.Component {
  state = {
    emails: ['', '', ''] // 初始3个输入框
  };

  handleChange = index => event => {
    const updatedEmails = [...this.state.emails];
    updatedEmails[index] = event.target.value;
    this.setState({ emails: updatedEmails });
  };

  addMemberHandler = () => {
    this.setState(prevState => ({
      emails: [...prevState.emails, '']
    }));
  };

  // 提交逻辑示例
  handleSubmit = () => {
    // 可选：过滤掉空的邮箱地址
    const validEmails = this.state.emails.filter(email => email.trim() !== '');
    // 这里就可以把validEmails数组发送给后端了
    console.log('要提交的邮箱数组:', validEmails);
  };

  render() {
    const { classes } = this.props;
    return (
      <div>
        {this.state.emails.map((email, index) => (
          <TextField
            key={index}
            value={email}
            className={classes.textField}
            onChange={this.handleChange(index)}
            placeholder="Enter email"
            type="email"
          />
        ))}
        <p onClick={this.addMemberHandler}> ADD MORE EMAIL ADDRESSES</p>
        <button onClick={this.handleSubmit}>Submit Emails</button>
      </div>
    );
  }
}

这样每个输入框的内容都会独立存储在emails数组里，提交时直接取这个数组（或者过滤空值后）发送即可，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Coder