反应编辑具有值的输入元素

Question

我有这个输入：

  <input
    type="text"
    autoFocus
    value={post.body}
   />

我希望用户能够编辑该值，我尝试设置 contentEditable 但它不起作用

Answer 1

<input type="text" autoFocus defaultValue={post.body}/>

在您的代码中，您无法编辑值。因为你设置了value，所以设置了defaultValue。

Answer 2

您必须在此输入上设置事件侦听器以捕获正在发生的变化。

您的数据应该是定义为

的状态变量

const [value, setValue] = useState("");

在您的情况下，默认值可以是 post.body

const [value, setValue] = useState(post.body);

然后在输入组件中连接在一起

 <input
    type="text"
    value={value}
    onChange={(event) => setValue(event.target.value)}
   />

React editing input element that has a value