使用输入中的文本更新div

我正在学习React并尝试创建一个简单的div,使其根据输入框的内容更新文本内容。

这是我的代码:

import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

const inputId = 'input'
const containerId = 'container'

// This is the input
const input = <input id={inputId}></input>

// The contents of this should be updated
const element = <div id={containerId} children={inputId.value} />

ReactDOM.render([element, input], rootElement);

目前,什么都没有发生。在输入框中输入文本时。 div不会更新。我想念什么吗?

评论
  • krerum
    krerum 回复

    您需要创建一个父组件,在其中声明状态

    function App() {
     const [text, setText] = React.useState('');
    
     return (
      <>
       <input type="text" onChange={(ev) => setText(ev.target.value)}/>
       <div>{text}</div>
      </>
     )
    }
    ReactDOM.render(<App />, document.getElementById("root"));