React中如何更新textarea的值？遇双向绑定异常问题求助

问题原因 #

• onChange事件取值错误：handlechange函数里错误使用event.target.content获取输入值，textarea的实际输入内容应该通过event.target.value获取，这导致手动输入时无法正确更新state，进而让textarea失去可编辑性。
• defaultValue的局限性：defaultValue是React非受控组件的初始化属性，仅在组件首次渲染时生效，后续通过setState修改state不会同步到textarea，所以按钮点击后内容无法更新。

解决方法 #

修正handlechange函数的取值逻辑，确保state与textarea的value正确双向绑定，这样无论是手动输入还是按钮触发的state更新，都能同步到textarea：

"use client";

import { Button } from "@mui/material";
import { useState } from "react";

export default function TextAreaCreate() {
  const [content, setContent] = useState("<p></p><br/>");

  function paragraph() {
    setContent(content + "\n<p></p>");
  }
  
  // 修正取值为event.target.value，并指定正确的事件类型
  function handlechange(event: React.ChangeEvent<HTMLTextAreaElement>) {
    setContent(event.target.value);
  }

  return (
    <div>
      <textarea 
        name="content" 
        className="text-black border border-black w-full h-52" 
        value={content} 
        onChange={handlechange} 
        required
      ></textarea><br />
      <div className="m-5">
        <Button variant="contained" onClick={paragraph}>Paragraph</Button>
      </div>
    </div>
  );
}

额外建议：给handlechange的event参数加上React.ChangeEvent<HTMLTextAreaElement>类型，避免any类型带来的类型隐患。

内容的提问来源于stack exchange，提问作者Arya Suwandika