时间戳

首页 > 解决方案 > 每当我在输入中输入任何内容时网页都会消失

reactjs - 每当我在输入中输入任何内容时网页都会消失

问题描述

我是新手，我一直在尝试简单的程序来更好地理解 React。这是我写的代码。

const Previewer = (props) => {
  let {text} = props
  return (
    <div>
      <p>{text}</p>
    </div>
  )
}

const App = () => {
  let [text, setText] = useState()
  return (
    <>
      <label for="text-edit">Editor</label>
      <textArea id="text-edit" value={text} placeholder="Type Here..." onChange={(event) =>
          setText({
            text: event.target.value
          })}
      ></textArea>
      {console.log(text)}
      <Previewer text={text} /> 
    </>
  )
}

const root = document.querySelector('#root')
ReactDOM.render(<App />,  root)

我遇到的问题是，每当我开始在 textarea 元素中输入任何内容时，整个网页都会消失。我假设这是因为组件生命周期问题，但我不确定。谁能解释我这个程序哪里出错了？

标签： reactjs

解决方案

问题是App组件，onChange你需要传递一个字符串值而不是一个对象，它<textarea>不是<textArea>

const App = () => {
  let [text, setText] = useState()
  return (
    <>
      <label for="text-edit">Editor</label>
      <textarea id="text-edit" value={text} placeholder="Type Here..." onChange={(event) =>
          setText(event.target.value)}
      ></textarea>
      {console.log(text)}
      <Previewer text={text} /> 
    </>
  )
}

推荐阅读