在 React 中更新文本区域值

Question

如何更新 React 中的

textarea

值？我在

setState

的

textarea

的按钮上使用了

value

钩子，但随后我无法编辑

textarea

的内容，并且当我使用

defaultValue

而不是

value

或添加时

onChange

属性指向

textarea

，

setState

挂钩不起作用，浏览器控制台会向我抛出两个警告（我将在下面显示）。

这是我从浏览器控制台收到的警告，不知道为什么会发生这种情况。另外，如果我只对

setState

的

textarea

使用

value

，它可以正常工作，但如前所述，如果不将

textarea

属性更改为

value

或，我无法编辑

defaultValue

的内容或将

onChange

添加到

textarea

。

Answer 1

我会分享代码而不是控制台警告。但这是我的假设。您需要通过

onChange

。

import React, { useState } from 'react';

function App() {
  const [text, setText] = useState(''); // here's your state

  const handleChange = (event) => {
    setText(event.target.value); // you update the state as the user types
  };

  const updateText = () => {
    setText('Updated Text'); // here you set a new value when a button is clicked
  };

  return (
    <div>
      <textarea
        value={text} // Controlled component
        onChange={handleChange} // you update state on change
      />
      <button onClick={updateText}>Update Text</button>
    </div>
  );
}

export default App;

如果您提供的 value prop 没有

onChange

，则

textarea

将变为只读，这就是您无法编辑内容的原因。