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

Question

我的（简化的）目标：
在表单本身旁边显示表单输入的文本内容，并随着输入文本的变化更新反映的文本。表单位于 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, { 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;

标签： javascriptreactjs

Answer 1

您可以将 State Hook 从 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;