Javascript 如何使用React在单独的div中动态显示textarea的值？

我正在使用React（初学者）开发一个降价预览器，并试图在页面上的一个单独的div中显示textarea的当前值。我不确定如何最好地使用React处理textarea值

我的组件层次结构如下所示：

• 应用程序
  • 编辑
    • 工具栏
    • Textarea
  • 预览者
    • 工具栏
    • 目的地Div

目前，我的应用程序组件中有一个函数，用于处理对textarea的更改-这将作为道具传递给编辑器组件，并进一步传递给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;

函数应用程序（）{
常量handleTextChange=（）=>{
const textarea=document.getElementById（“textarea”）；
让文字；
如果（textarea==null）{
text=“”；
}否则{
text=textarea.value；
}
console.log（文本）；
返回文本；
};
返回(
);
}
导出默认应用程序；

此函数正在工作-我可以在控制台中看到输入时textarea值的更新

问题如下:

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

新的反应（和堆栈溢出）-任何建议（或相关问题的链接）感谢

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

那将是通常的方式，是的

在我的应用程序组件中声明handleTextChange函数是正确的开始方法吗？有没有更好的方法来达到这个效果

有

handleTextChange

没有问题，但问题是如何访问文本区域。一般来说，你不应该为了这个去DOM。相反，将

textarea

a（因此其值保持在状态）并在呈现

textarea

和呈现预览

div

时使用该状态

下面是一个非常基本的例子：

const{useState}=React；
//'Editor'组件接收值和更改函数，如下所示：
//道具。我已经调用了change函数'handleTextChange'，因此您可以
//看看它和你的代码有什么关系，但我可能会调用它
//`setValue`否则。
常量编辑器=React.memo（{value，handleTextChange}）=>{
//我们的变更处理程序只是从textarea中提取值
//然后把它传下去，也许不需要在这里记下来，
//但如果您想，您可以将“useCallback”与
//依赖项数组[handleTextChange]。
const onChange=e=>handleTextChange（e.target.value）
返回(
handleTextChange（e.target.value）}
/>
);
});
//预览组件显示文本
常量预览=（{text}）=>{
返回{text}；
};
//只是个替身
常量头=（）=>（头）；
函数App（）{
//文本及其设置程序的状态
const[text，setText]=useState（“”）；
//注意我们如何将状态设置器直接传递给编辑器`
//如下面的“handleTextChange”。
返回(
);
}
render（，document.getElementById（“根”））

首先，您有两种类型的组件：ES6类组件（可以通过此.state使用状态）和功能组件。功能组件不能使用React状态，但React中引入了一个新特性，称为React钩子（useState钩子）。在您的情况下，您需要在应用程序组件中使用状态变量，然后通过道具将此状态传递给组件。您需要在HandletText更改功能中设置组件的状态，并将其作为道具传递给预览组件。
谢谢。请澄清，如果父组件中仍然存在
handleTextChange
，并且
textarea
成为受控组件（感谢该链接），我如何将该状态传递给预览
div
？它是作为道具传递的吗？@wrufusii-是的，没错。我在答案中添加了一个简单的示例，并进行了一些内联解释。快乐编码！对于初学者来说，你做得很好，特别是因为你挑战了一个常见的陷阱——你的假设。是的，在App组件中声明handleTextChange函数是一种反模式；现在，在提供另一种选择之前，我想建议您首先成功地实现这个问题的目标，并达到您对正在进行的DOM和状态管理感到满意的程度，只是为了降低复杂性，然后看看挂钩。React中的挂钩允许任意两个组件（无论父子关系如何）共享数据和功能。