输入框编辑后失去焦点？

为什么我的input一输入一个字符就失去焦点？看了下元素渲染，原来我一修改就又重新渲染了。。

解决方法：

1. 增加唯一的key
2. 使用 useRef 来管理焦点（借助 useRef 可以手动管理输入框的焦点，通过保存当前编辑的输入框的 ID，您=可以在渲染时控制输入框的焦点状态。）
3. 避免不必要的渲染

  const editingInputIdRef = useRef(null);

  // 输入框值改变
  const handleInputChange = (id: any, value: string) => {
    setInputValues((prev: any) => ({
      ...prev,
      [id]: value,
    }));
  };

 <Input
    id={`input-${item.id}`}
    value={inputValues[item.id]}
    key={item.id}
    placeholder="请输入"
    onChange={(e) => handleInputChange(item.id, e.target.value)}
    onFocus={() => { editingInputIdRef.current = item.id; }}
    onBlur={() => { editingInputIdRef.current = null; }}
  />



<Button type="link" onClick={() => { save(item); }}>保存</Button>


  <Button type="link"  
   onClick={() => { 
  	handleEdit(item.id);
    editingInputIdRef.current = item.id; 
  }}
  >编辑</Button>