如何让Input内的CreateIcon点击可编辑，且仅点击对勾图标时保存输入值

• 点击InputAdornment内部的CreateIcon即可进入名称编辑状态，替换当前仅点击文本周边区域触发编辑的逻辑
• 输入值不随每次输入实时变更，仅当用户点击对勾图标（Tick icon）时才正式保存变更

import { useRef, useState } from 'react';
import Input from '@mui/material/Input';
import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';
import Grid from '@mui/material/Grid';
import CreateIcon from '@mui/icons-material/Create';
import CheckCircle from '@mui/icons-material/CheckCircle';
import CancelIcon from '@mui/icons-material/Cancel';

export default function App() {
  // 最终保存的名称
  const [name, setName] = useState('Neha');
  // 输入过程中的临时值
  const [inputValue, setInputValue] = useState('Neha');
  // 编辑态控制
  const [isEditing, setIsEditing] = useState(false);
  // 输入框ref用于自动聚焦
  const inputRef = useRef(null);

  // 点击编辑图标进入编辑态
  const handleEnterEdit = () => {
    setIsEditing(true);
    // 进入编辑态自动聚焦输入框
    inputRef.current?.focus();
  };

  // 保存修改
  const handleSaveName = () => {
    setIsEditing(false);
    // 仅点击对勾时才更新最终保存的名称
    setName(inputValue);
  };

  // 取消修改
  const handleResetName = () => {
    setIsEditing(false);
    // 取消时恢复为原来的名称
    setInputValue(name);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Input
        ref={inputRef}
        value={inputValue}
        disabled={!isEditing}
        endAdornment={
          isEditing ? null : (
            <InputAdornment position="end">
              <IconButton onClick={handleEnterEdit} edge="end">
                <CreateIcon />
              </IconButton>
            </InputAdornment>
          )
        }
        onChange={(event) => {
          // 仅更新临时输入值，不修改最终保存的name
          setInputValue(event.target.value);
        }}
      />
      {isEditing && (
        <Grid item>
          <IconButton onClick={handleSaveName}>
            <CheckCircle />
          </IconButton>
          <IconButton
            data-test-id="btn-cancel-simulation-name"
            onClick={handleResetName}
          >
            <CancelIcon />
          </IconButton>
        </Grid>
      )}
    </div>
  );
}

• 给CreateIcon外层增加可点击的IconButton组件，绑定点击事件触发进入编辑态，同时通过useRef获取输入框实例实现进入编辑态自动聚焦
• 拆分临时输入值inputValue和最终保存值name，输入过程中仅修改临时值，不会触发最终数据更新
• 仅在点击对勾确认时才将临时值同步到最终保存的name，实现非实时更新的需求
• 编辑态下隐藏编辑图标避免逻辑冲突，非编辑态下可设置输入框禁用，避免点击文本区域触发编辑

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