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

Question

我正在使用React(初学者(开发一个markdown预览器，并试图在页面上的一个单独的div中显示文本区域的当前值。我不知道如何最好地使用React处理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;

这个功能正在运行——当我键入时，我可以在控制台中看到文本区域值的更新。

问题如下：

• 我应该如何将这个值传递给desinationdiv？这是否需要涉及State，以便在每次textarea值更改时，目标div都会重新呈现
• 在我的应用程序组件中声明handleTextChange函数是正确的方法吗？有没有更好的方法来实现这个结果

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

Answer 1

我应该如何将此值传递给设计div？这是否需要涉及State，以便在每次textarea值更改时，目标div都会重新呈现？

这将是通常的方式，是的。

在我的应用程序组件中声明handleTextChange函数是正确的方法吗？有没有更好的方法来实现这个结果？

有handleTextChange是可以的，但问题是如何访问文本区域。一般来说，您不应该为此而访问DOM。相反，将textarea设为受控组件(因此其值保持在状态中(，并在渲染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>

Answer 2

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