基于 state 的 React 组件之间的实时更新

Question

我的（简化的）目标：
在表单本身旁边显示表单输入的文本内容，并在输入文本更改时更新反映的文本。 表单位于 React 组件中，显示的文本位于另一个组件中。

我可以使用组件 state 来控制输入的文本并根据onChange表单事件更改 state。 但是我怎样才能更改显示文本的 state 以便获得我正在寻找的实时更新？

输入和 output 组件具有相同的父组件。

这是我的输入组件：

import React, { useState } from "react";

function InputBoxTest() {
  const [inText, setInText] = useState("");

  const handleChange = event => {
    setInText(event.target.value);
    // My instinct is to setOutText here, but I can't...
  };

  return (
    <textarea className="form-control" id="comment" onChange={handleChange}>
      {inText}
    </textarea>
  );
}

export default InputBoxTest;

我的 output 组件：

import React, { useState } from "react";

function OutputBoxTest() {
  const [outText, setOutText] = useState("");

  return <p>{outText}</p>;
}

export default OutputBoxTest;

还有我的父组件：

import React from "react";
import InputBoxTest from "./InputBoxTest";
import OutputBoxTest from "./OutputBoxTest";

function Test1(props) {
  return (
    <>
      <div className="row">
        <div className="container-fluid col-sm-7">
          <InputBoxTest />
        </div>
        <div className="col-sm-5">
          <OutputBoxTest />
        </div>
      </div>
    </>
  );
}

export default Test1;

Answer 1

如果您需要在 2 个组件之间共享一些 state，则需要将 state 移动到它们的（至少是第一个）父级中。 你可以在这里阅读更多关于它的信息。

基本上这意味着您的Test1组件应该是您的textarea值的持有者。

请根据您的代码查看此示例。

Answer 2

您可以将 State Hook 从 InputBoxText 移动到 ParentComponent Test1 InputBoxText 然后用于显示和更新 state OutputBoxText 仅用于显示

import React from "react";
import InputBoxTest from "./InputBoxTest";
import OutputBoxTest from "./OutputBoxTest";

function Test1(props) {

   const [inText, setInText] = useState("");
   const handleChange = event => {
       setInText(event.target.value);
   };

   return (
      <>
         <div className="row">
         <div className="container-fluid col-sm-7">
             <InputBoxTest text={inText} handleChange={handleChange}  />
         </div>
         <div className="col-sm-5">
            <OutputBoxTest text={inText}/>
         </div>
        </div>
     </>
   );
}

export default Test1;


function InputBoxTest(props) {
   return (
      <textarea className="form-control" id="comment" onChange={props.handleChange}>
         {props.text}
      </textarea>
   );
}
export default InputBoxTest;


function OutputBoxTest(props) {
   return <p>{props.text}</p>;
}

 export default OutputBoxTest;