reactjs - ReactJS：输入 onChange 不更新状态

Question

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

我有两个组件，组件 1 将输入值的状态作为道具传递给组件 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;

提前致谢

标签： reactjs

Answer 1

如果我理解正确，您希望在（1）父组件更新或（2）更新中的输入值时DuplicateHubDisplay更新状态。commsTitleinputValueDuplicateHubDisplay

问题

DuplicateHubDisplay传递了一个初始状态值为的data道具，因此初始状态也是. 不会“监听”道具更新然后更新状态。inputValue""commsTitle ""DuplicateHubDisplaycommsTitle

解决方案

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

是的，使用useEffect钩子来响应道具值的变化并更新本地commsTitle状态。

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"
    />
  );
}

解决方案 2

如果您实际上不需要对状态做任何事情，commsTitle您可以在输入上分配data[0]为 adefaultValue并将data[0]值用作 React 键，因此当来自父 React 的值更新时，将使用新的默认值重新安装/重置输入。

const DuplicateHubDisplay = ({ data }) => {
  const [inputValue] = data; // array destructuring assignment

  return (
    <input
      key={inputValue}
      id="duplicatehub-title"
      defaultvalue={inputValue}
      className="input"
      placeholder="Incident Title"
    />
  );
}