javascript - 如何使用 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

How should I pass this value to the desination div? Does this need to involve State, so that the destination div re-renders every time the textarea value changes?

这是通常的方式，是的。

Was declaring the handleTextChange function within my App component the right approach to begin with? Is there are better way to achieve this result?

拥有handleTextChange很好，但问题是你如何访问文本区域。一般来说，您不应该为此访问 DOM。相反，将 textarea 设置为 controlled component (因此它的值保留在状态中)，并在渲染 textarea 时使用该状态，以及在渲染预览 div 时使用该状态。

这是一个非常基本的示例:

const {useState} = React;

// The `Editor` component receives the value and the change function as
// props. I've called the change function `handleTextChange` so you can
// see how it relates to your code, but I might well have called it
// `setValue` otherWise.
const Editor = React.memo(({value, handleTextChange}) => {
    // Our change handler just extracts the value from the textarea
    // and passes it on. No need to memoize it here, probably,
    // but if you wanted to you could use `useCallback` with the
    // dependency array [handleTextChange].
    const onChange = e => handleTextChange(e.target.value)
    return (
        <textarea
            value={value}
            onChange={e => handleTextChange(e.target.value)}
        />
    );
});

// The Preview component shows the text
const Preview = ({text}) => {
    return <div>{text}</div>;
};

// Just a stand-in
const Header = () => <div>(Header)</div>;

function App() {
    // The state for the text and its setter
    const [text, setText] = useState("");
  
    // Notice how we can pass the state setter directly to `Editor`
    // as `handleTextChange` below.
    return (
        <div className="App">
            <Header />
            <div className="App-body">
                <Editor handleTextChange={setText} />
                <Preview text={text} />
            </div>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>