如何使用 React 在单独的 div 中动态显示文本区域的值？

Question

我正在使用 React （初学者）开发 markdown 预览器，并且尝试在页面上的单独 div 中显示文本区域的当前值。我不确定如何最好地使用 React 来处理 textarea 值。

我的组件层次结构如下：

• 应用程序

• 工具栏

• 目的地部门

• 工具栏

• 文本区

• 编辑

• 预览器

目前，我的 App 组件中有一个函数可以处理对 textarea 的更改 - 它作为 props 传递给 Editor 组件，并进一步传递给 Textarea 组件，在 onChange 事件后调用它：

function App() {

  const handleTextChange = () => {

    const textarea = document.getElementById("textarea");

    let text;

    if (textarea === null) {

      text = "";

    } else {

      text = textarea.value;

    }

    console.log(text);

    return text;

  };

  return (

    <div className="App">

      <Header />

      <div className="App-body">

        <Editor handleTextChange={handleTextChange} />

        <Preview />

      </div>

    </div>

  );

}

export default App;

此功能正在运行 - 我可以在键入时在控制台中看到文本区域值的更新。

问题如下：

• 我应该如何将此值传递给目标 div？这是否需要涉及 State，以便每次 textarea 值发生变化时目标 div 都会重新渲染？

• 在我的 App 组件中声明 handleTextChange 函数是正确的开始方法吗？有没有更好的方法来达到这个结果？

React（和 Stack Overflow）新手 - 感谢任何建议（或相关问题的链接）

Answer 1

首先，您有两种类型的组件：ES6 类组件（可以通过 this.state 使用状态）和您的情况下的功能组件。功能组件不能使用React状态，但React中引入了一个新功能，称为react hooks（useState hook）。在您的情况下，您需要在应用程序组件中使用状态变量，然后通过 props 将此状态传递给您的组件。您需要在handleText更改函数中设置组件的状态，并将其作为道具传递给预览组件。