React中获取Material UI点击元素的值并传给后端删除

看起来你在循环渲染邮箱输入框和删除按钮时，遇到了点击按钮无法获取对应邮箱值的问题，这在React列表渲染场景里很常见，我来给你梳理下可行的解决方案：

核心问题分析 #

你原来用for循环渲染列表的方式，容易触发闭包陷阱（点击按钮时变量i会变成循环的最后一个值），而且onChange事件绑定到了primaryEmail状态，这会导致所有输入框共享同一个状态，显然不符合多邮箱输入的需求。

优化后的代码实现 #

首先把for循环改成React推荐的map方法渲染列表，同时给删除按钮的点击事件直接传入对应邮箱值：

// 渲染部分
{this.state.emails.map((email, index) => (
  <div key={index}>
    <TextField
      style={textField}
      floatingLabelText="EMAIL"
      type="email"
      spellCheck={false}
      autoCorrect="off"
      value={email}
      onChange={(e) => this.updateEmail(e, index)}
    />
    <FlatButton
      label="删除"
      onClick={() => this.handleDelete(email)}
    />
  </div>
))}

然后实现对应的状态更新和删除处理函数：

// 更新指定索引的邮箱值
updateEmail = (e, index) => {
  const newEmails = [...this.state.emails];
  newEmails[index] = e.target.value;
  this.setState({ emails: newEmails });
}

// 处理删除逻辑，拿到对应邮箱值传给后端
handleDelete = (targetEmail) => {
  // 这里调用后端删除接口，示例用fetch
  fetch('/your-delete-api-endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ email: targetEmail })
  })
  .then(res => res.json())
  .then(() => {
    // 后端删除成功后，更新本地状态移除该邮箱
    this.setState(prevState => ({
      emails: prevState.emails.filter(email => email !== targetEmail)
    }));
  })
  .catch(err => console.error('删除失败:', err));
}

补充说明 #

• 如果你的邮箱列表可能存在重复值，建议用索引来传递（避免删除错误），修改按钮点击事件为onClick={() => this.handleDelete(index)}，然后在handleDelete里通过索引获取邮箱并删除：

  handleDelete = (deleteIndex) => {
    const targetEmail = this.state.emails[deleteIndex];
    // 调用后端接口...
    this.setState(prevState => ({
      emails: prevState.emails.filter((_, idx) => idx !== deleteIndex)
    }));
  }
  

• 尽量避免在循环里用let i的方式，map方法更贴合React的状态驱动模式，也能避免闭包问题。

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