Javascript 基于状态的React组件之间的实时更新

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

我可以使用组件状态来控制输入的文本，并基于onChange表单事件更改状态。但是我怎样才能同时改变显示文本的状态，从而获得我正在寻找的实时更新呢

输入和输出组件具有相同的父组件

这是我的输入组件：

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;

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;

import React，{useState}来自“React”；
函数InputBoxTest（）{
const[inText，setInText]=useState（“”）；
const handleChange=事件=>{
setInText（event.target.value）；
//我的本能是在这里发短信，但我不能。。。
};
返回(
{inText}
);
}
导出默认InputBoxTest；

我的输出组件：

import React, { useState } from "react";

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

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

export default OutputBoxTest;

import React，{useState}来自“React”；
函数OutputBoxTest（）{
常量[outText，setOutText]=useState（“”）；
返回{outText}
；
}
导出默认OutputBoxTest；

和我的父组件：

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;

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;

从“React”导入React；
从“/InputBoxTest”导入InputBoxTest；
从“/OutputBoxTest”导入OutputBoxTest；
功能测试1（道具）{
返回(
);
}
导出默认Test1；

如果需要在两个组件之间共享某些状态，则需要在其（至少第一个）父组件中移动该状态。你可以阅读更多关于它的内容

基本上这意味着

Test1

组件应该是

textarea

值的持有者

---

请根据您的代码查看此内容。

您可以将状态挂钩从InputBoxText移动到ParentComponent Test1中 然后，InputBoxText用于显示和更新状态 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;

从“React”导入React；
从“/InputBoxTest”导入InputBoxTest；
从“/OutputBoxTest”导入OutputBoxTest；
功能测试1（道具）{
const[inText，setInText]=useState（“”）；
const handleChange=事件=>{
setInText（event.target.value）；
};
返回(
);
}
导出默认Test1；
功能输入框测试（props）{
返回(
{props.text}
);
}
导出默认InputBoxTest；
功能输出框测试（props）{
返回{props.text}
；
}
导出默认OutputBoxTest；

在Test1中定义一个函数，该函数接收文本并更改状态。将该函数传递给InputBoxTest并从handleChange调用它。让OutputBoxTest依赖于Test1的状态。我认为使用redux进行状态管理会更好。或者mobx，如果你想让事情变得简单的话。@rodrigoap我已经试过了，但是在定义函数和传递函数时遇到了困难。如果我在Test1组件内部定义函数，我会在InputExtTest中从handleChange调用Test1.changeState（），并得到一个类型错误：default.changeState不是函数。太棒了，正是我所需要的，谢谢你的帮助！如果解决方案对你有效，你可以接受答案。