ReactJS：输入 onChange 不更新状态

Question

我遇到了一个问题，即 onChange={} 上的 <input /> 不会通过状态更改值。

我有两个组件，组件 1 将输入值的状态作为 prop 传递给组件 2：

组件 1：

function MainContent() {
  const [inputValue, setInputValue] = React.useState("");

  const onChangeHandler = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <>
      <input
        id="shtitle"
        value={inputValue}
        onChange={onChangeHandler}
        className="input sh-input"
        type="text"
        placeholder="Incident Title"
      />

      <DuplicateHubDisplay
        data={[
          inputValue,
          momentDate.format("DD/MM/YYYY HH:mm A"),
          textareaValue,
        ]}
      />
    </>
  );
}

export default MainContent;

组件 2：从组件 1 获取道具数据

  const [commsTitle, setCommsTitle] = useState("");
// const [commsTitle, setCommsTitle] = useState(duplicateHubData.data[0]); //Does not work
  
<input
 id="duplicatehub-title"
 value={duplicateHubData.data[0]}
 className="input"
 placeholder="Incident Title"
/>

我不知道如何将 duplicateHubData.data[0] 存储为状态，然后使用 onChange 更改状态值。

这样做不允许我更改输入值：

const DuplicateHubDisplay = (duplicateHubData) => {
    const [commsTitle, setCommsTitle] = useState(duplicateHubData.data[0]);

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

提前致谢

Answer 1

如果我理解正确，您希望 DuplicateHubDisplay 的 commsTitle 状态在 (1) 父组件的 inputValue 更新或 (2) {{ 中的输入值更新时更新1}} 次更新。

问题

DuplicateHubDisplay 被传递一个 DuplicateHubDisplay 属性，其中初始 data 状态值为 inputValue，因此初始 "" 状态也是 commsTitle . "" 不会“监听” props 的更新，然后更新 DuplicateHubDisplay 状态。

解决方案

commsTitle

是的，使用 <DuplicateHubDisplay data={[ inputValue, momentDate.format("DD/MM/YYYY HH:mm A"), textareaValue, ]} /> 钩子对 prop 值更改做出反应并更新本地 useEffect 状态。

commsTitle

解决方案 2

如果您实际上不需要对 const DuplicateHubDisplay = ({ data }) => { const [inputValue] = data; // array destructuring assignment const [commsTitle, setCommsTitle] = useState(inputValue); useEffect(() => { setCommsTitle(inputValue); }, [inputValue]); return ( <input id="duplicatehub-title" onChange={(e) => setCommsTitle(e.target.value)} value={commsTitle} className="input" placeholder="Incident Title" /> ); } 状态执行任何操作，您可以将 commsTitle 指定为输入的 data[0] 并使用 { {1}} 值作为 React 键，因此当父 React 的值更新时，将使用新的默认值重新加载/重置输入。

defaultValue