React Modal中textarea每次输入后失焦退出的问题该如何解决？

你遇到的输入失焦问题本质是每次调用setTitle/setContent更新状态时，textarea所在的DOM节点被销毁重建，导致焦点丢失，最常见的诱因有以下几种：

• 你把textarea或者整个Modal的组件定义写在了父组件的渲染函数内部，每次父组件重渲染都会生成全新的组件实例，触发全量重挂载
• Modal的key属性每次状态更新时都被修改了，React识别为不同元素直接销毁重建
• 外层容器的条件渲染逻辑在状态更新时触发了重渲染，连带销毁重建了textarea节点

具体修复步骤 #

1. 调整组件定义位置
   不要在任何组件的渲染函数内部定义子组件，把Modal、form相关的组件定义移到组件外层，避免每次重渲染生成新实例。

错误写法示例：

// 错误：子组件定义在父组件内部，每次重渲染都会生成新实例
function Parent() {
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')
  // 此处定义的ModalContent每次Parent重渲染都会被视为新组件
  const ModalContent = () => {
    return <Modal.Body>/* 你的表单代码 */</Modal.Body>
  }
  return <Modal><ModalContent /></Modal>
}

正确写法示例：

// 正确：子组件定义在外层，通过props传递状态和方法
const ModalContent = ({title, setTitle, content, setContent, Patch, setModalshow2}) => {
  return (
    <Modal.Body>
      <form onSubmit={Patch} className="form">
        <div className="control">
          <div className="field">
            <h2>What's in your mind?</h2>
            <textarea
              className="input1"
              value={title}
              placeholder="enter your title"
              onChange={event => setTitle(event.target.value)}
            />
          </div>
          <div className="field">
            <textarea
              className="input2"
              value={content}
              placeholder="insert your content"
              onChange={event => setContent(event.target.value)}
            />
          </div>
          <div className="form-btn">
            <button onClick={() => setModalshow2(false)} disabled={!title || !content} type="submit" className="btnSend">CREATE</button>
          </div>
        </div>
      </form>
    </Modal.Body>
  )
}

function Parent() {
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')
  const [modalShow2, setModalshow2] = useState(false)
  const Patch = (e) => { /* 你的提交逻辑 */ }
  return <Modal show={modalShow2}>
    <ModalContent 
      title={title} 
      setTitle={setTitle} 
      content={content}
      setContent={setContent}
      Patch={Patch}
      setModalshow2={setModalshow2}
    />
  </Modal>
}

2. 检查Modal的key属性
   如果给Modal设置了key属性，确保key值不会在title、content更新时发生变化，不要用随机数、时间戳、每次渲染都会生成新值的变量作为key。
3. 可选优化
   可以用useCallback包裹onChange的处理函数，减少不必要的重渲染：

const handleTitleChange = useCallback((e) => {
  setTitle(e.target.value)
}, [setTitle])

const handleContentChange = useCallback((e) => {
  setContent(e.target.value)
}, [setContent])

注：textarea标签本身没有type属性，你代码中写的type="text"属于冗余属性，可直接删除。

内容的提问来源于stack exchange，提问作者Gabriel Oliveira Menezes