React-Leaflet Popup内带Hooks的表单输入单字符就重渲染失焦如何解决

问题根因 #

这个问题是React-Leaflet的Popup组件的特殊渲染逻辑导致的：Popup的DOM节点是直接挂载在Leaflet的地图图层上，不属于React的常规虚拟DOM渲染树。当你在App组件内更新commentValue状态时，App组件会重渲染，此时Popup的内部内容会被完全销毁后重新创建，因此textarea会失去焦点。你做的「放在Popup外运行正常」的测试也完全印证了这个触发条件。

可行解决方案 #

方案1：改用非受控组件（最简单快速） #

放弃textarea的受控绑定逻辑，改用ref来获取输入值，避免每输入一个字符就触发父组件状态更新：

// 在App组件内声明ref
const commentRef = React.useRef(null);

function handleCommentSubmit(e) {
  e.preventDefault();
  // 提交时从ref取值
  const submitValue = { comment: commentRef.current.value };
  console.log('submitted comment', submitValue);
  // 提交后清空内容可选
  commentRef.current.value = '';
}

// 表单部分改写成非受控
<form onSubmit={handleCommentSubmit}>
  <label>
    Add Comment:
    <textarea name="comment" ref={commentRef} />
  </label>
  <input type="submit" value="Submit" />
</form>

方案2：抽离表单为独立组件，隔离状态 #

如果需要保留受控组件的逻辑（比如实时校验、字段联动等），把表单和对应的状态、处理逻辑都抽成独立组件，避免App组件状态更新触发Popup内容重建：

// 独立的评论表单组件
const CommentForm = React.memo(() => {
  const [commentValue, setCommentValue] = React.useState({ comment: "" });

  function handleCommentSubmit(e) {
    e.preventDefault();
    console.log('submitted comment', commentValue);
  }

  function handleCommentValue(e) {
    setCommentValue({
      [e.target.name]: e.target.value
    });
  }

  return (
    <form onSubmit={handleCommentSubmit}>
      <label>
        Add Comment:
        <textarea 
          name="comment" 
          onChange={handleCommentValue} 
          value={commentValue.comment}  
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
});

// App组件内Popup里直接引用即可
<Popup position={[activePark.ycoord, activePark.xcoord]} onClose={() => setActivePark(null)}>
  <div>
    <h2>{activePark.name}</h2>
    <p>{activePark.description}</p>
  </div>
  <div>
    <CommentForm />
  </div>
</Popup>

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