@material-ui/core中TextField多行文本框(Textarea)如何正确设置值

安全阿岳

2026-10-3

解决方案

为什么之前的方案不生效

React框架采用状态驱动视图的渲染逻辑，直接用jQuery操作DOM修改值不会同步到React组件内部状态，下次组件重渲染时手动修改的DOM值会被覆盖
你给组件设置的id包含空格，#开头的jQuery选择器会把空格识别为后代选择器语法，无法正确匹配到对应元素
重复id不符合HTML规范，会导致选择器定位混乱

推荐方案：使用受控组件模式（最优解）

MUI的TextField原生支持受控模式，你只需要将组件值和React状态绑定即可，完全不需要手动操作DOM：

先在组件state中定义对应字段存储文本值：

// 组件初始化state时添加
this.state = {
  // 其他原有状态
  painDescription: ''
}

给TextField添加value属性绑定state，补充onChange同步状态：

<TextField
    className="bd_textarea"
    id="tt_description_text_outlined-multiline-static" // 注意修改id不要带空格
    label="Pain description"
    multiline
    rows={5}
    value={this.state.painDescription} // 绑定状态值
    onChange={(e) => this.setState({painDescription: e.target.value})} // 实时同步输入内容到状态
    onBlur={(f)=>(this.textOnBlur({id:answeringPainSpot.spotId, value:f.target.value, doc_name:answeringPainSpot.doc_name}))}
/>

弹窗打开需要加载已保存内容时，直接更新state即可：

// 弹窗打开逻辑中添加
this.setState({
  painDescription: spot_text // 你的已保存文本值
})

备选方案：用ref获取DOM实例（仅非受控场景使用）

如果你不需要把值纳入React状态管理，可以通过MUI提供的inputRef属性直接获取textarea的DOM引用，避免手动查询DOM：

// 组件定义时添加ref
<TextField
    className="bd_textarea"
    id="tt_description_text_outlined-multiline-static"
    label="Pain description"
    multiline
    rows={5}
    inputRef={el => this.painTextareaRef = el} // 绑定ref
    onBlur={(f)=>(this.textOnBlur({id:answeringPainSpot.spotId, value:f.target.value, doc_name:answeringPainSpot.doc_name}))}
/>

需要赋值时直接操作ref即可：