ReactJS 父子组件传值场景下input的onChange无法更新state的问题求助

• 只要给<input>绑定固定value属性但不配套写onChange事件，组件会被判定为只读受控组件，输入框会被直接锁死，无法手动修改值，这是你最初写组件2的输入框时无法编辑的根本原因。

  只要给input绑定了value属性，就必须配套实现onChange事件来处理值更新，否则React会默认将输入框设为只读，禁止用户手动编辑。

• useState(初始值)的特性是：传入的初始值仅会在组件第一次挂载渲染时生效一次，后续组件因为父组件传值变化触发的重渲染，不会重新执行state初始化逻辑。你的场景里MainContent首次渲染时inputValue为空字符串，传给组件2的data[0]就是空值，组件2初始化内部state为空；之后你在MainContent的输入框输入内容，inputValue更新触发MainContent重渲染，传给组件2的data[0]虽然变了，但组件2没有被卸载重挂载，内部的commsTitle始终停留在初始的空值，完全不会跟随props变化，这就是你尝试用useState存props值失败的原因。

根据你的实际需求分两种场景实现即可：

场景1：需要父组件输入框的内容变化时，组件2的输入框同步跟随更新，同时组件2的输入框支持独立编辑 #

这种场景下用useEffect监听props变化，同步刷新内部state即可，代码如下：

import { useState, useEffect } from 'react';

// 直接解构接收props，避免冗余的路径写法
const DuplicateHubDisplay = ({ data }) => {
  // 维护组件2自身可编辑的输入值
  const [commsTitle, setCommsTitle] = useState("");

  // 监听父组件传递的标题值，props变化时同步更新内部state
  useEffect(() => {
    setCommsTitle(data[0]);
  }, [data[0]]);

  return (
    <input
      id="duplicatehub-title"
      onChange={(e) => setCommsTitle(e.target.value)}
      value={commsTitle}
      className="input"
      placeholder="Incident Title"
    />
  );
}
export default DuplicateHubDisplay;

这种写法的运行逻辑：

• 组件首次挂载时，会执行一次useEffect，把当前父组件传过来的标题值同步到输入框
• 后续父组件输入框内容变化，data[0]更新时，useEffect会再次触发，把最新的父组件值刷到组件2的输入框上
• 用户在组件2的输入框手动输入时，直接触发setCommsTitle更新内部值，不会出现输入被锁死的问题

场景2：不需要父组件实时同步，仅需要组件2第一次打开时取当时的父组件值作为输入框的默认值 #

这种场景不需要写useEffect，只需要在父组件渲染组件2的时候，给组件加个唯一的key属性，强制组件在需要的时机重新挂载即可。比如在MainContent里调整渲染逻辑：

<DuplicateHubDisplay
  key={/* 填写触发组件重新打开的唯一标识，比如当前选中的事件ID */}
  data={[
    inputValue,
    momentDate.format("DD/MM/YYYY HH:mm A"),
    textareaValue,
  ]}
/>

当key变化时，React会自动销毁旧的组件实例，重新挂载新的组件，这时候useState(duplicateHubData.data[0])的初始化逻辑就会正常执行，拿到最新的props值作为输入框的初始值。

• 不要直接把props的值绑定到input的value上但不写onChange，这种写法会直接锁死输入交互。
• 如果需要在组件里用props的值做内部state的初始值，一定要注意组件的挂载时机：只要组件没有被重挂载，useState的初始化逻辑就不会再次执行，永远取第一次挂载时的props值。

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