React中触发closeEmail时为TextField赋值的实现方法咨询

要实现closeEmail触发时把email.emailAddress赋值给TextField的value，核心是把TextField改成受控组件，用React状态来管理输入框的值，具体步骤如下：

1. 添加状态变量 #

在组件内部用useState定义状态，存储当前输入框的邮箱地址：

import { useState } from 'react';

// 函数组件顶部添加状态，初始值设为传入的email地址
const [currentEmailValue, setCurrentEmailValue] = useState(email.emailAddress);

2. 修改TextField属性 #

把TextField的defaultValue替换为value，绑定到刚才定义的状态变量：

<TextField
  style={{ width: "95%" }}
  onChange={emailOnChange}
  label="Email Address"
  variant="filled"
  name={email.emailAddress}
  value={currentEmailValue} // 替换defaultValue为value
/>

注意：受控组件必须保留onChange事件（你已有emailOnChange），用来实时更新状态，否则输入框会变成只读。

3. 更新closeEmail函数 #

在closeEmail里调用状态更新函数，将传入的email.emailAddress赋值给状态：

const closeEmail = (email: IEmail) => {
  setCurrentEmailValue(email.emailAddress); // 添加这行更新输入框值
  setOpenEmail(false);
};

完整修改后的代码 #

JSX部分 #

<div style={{ display: "block" }}>
  <FormControl sx={{ mt: 2, minWidth: 720 }}>
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
      }}
    >
      <TextField
        style={{ width: "95%" }}
        onChange={emailOnChange}
        label="Email Address"
        variant="filled"
        name={email.emailAddress}
        value={currentEmailValue}
      />
      <DeleteIcon style={{ color: "red" }} onClick={() => deleteEmail(email, prop.id)} />
    </div>
  </FormControl>
</div>

TS部分 #

import { useState } from 'react';

// 组件内部状态定义
const [currentEmailValue, setCurrentEmailValue] = useState(email.emailAddress);

const closeEmail = (email: IEmail) => {
  setCurrentEmailValue(email.emailAddress);
  setOpenEmail(false);
};

// 确保emailOnChange同步更新状态（示例）
const emailOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setCurrentEmailValue(e.target.value);
};

补充说明：defaultValue仅在组件首次渲染时生效，无法通过外部操作动态修改。改成受控组件后，状态的变化会直接映射到输入框，完美满足你在closeEmail触发时更新值的需求。

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