React中textarea随props更新不生效求助：需支持用户编辑

嘿，这个问题我之前踩过坑！让我给你理清楚为什么会这样，以及怎么解决～

问题根源 #

你碰到的情况其实是React中非受控组件的特性导致的：

• defaultValue是给非受控组件设置的初始值，它只会在组件第一次挂载的时候生效。后续父组件传递的props发生变化，React不会再去更新这个值——因为非受控组件的状态是由DOM本身管理的。
• 而如果直接给textarea设置value却不配合onChange处理，组件就会变成完全受控的“只读”状态，用户输入没法触发状态更新，自然就不能编辑了。

解决方案一：受控组件结合内部状态（推荐） #

这是最符合React数据流理念的方案，既能响应父组件props的更新，又支持用户编辑。核心思路是用组件内部的状态来维护textarea的当前值，同时监听props变化同步更新状态，再通过onChange处理用户输入。

代码示例：

import React, { Component } from 'react';

export default class RenderedScript extends Component {
  constructor(props) {
    super(props);
    // 用props的初始值初始化内部状态
    this.state = {
      scriptContent: props.formScript || ''
    };
  }

  // 监听props变化，当formScript更新时同步到state
  componentDidUpdate(prevProps) {
    if (prevProps.formScript !== this.props.formScript) {
      this.setState({
        scriptContent: this.props.formScript || ''
      });
    }
  }

  // 处理用户输入，实时更新内部状态
  handleInputChange = (e) => {
    this.setState({
      scriptContent: e.target.value
    });
  }

  render() {
    return (
      <div>
        <textarea
          value={this.state.scriptContent}
          onChange={this.handleInputChange}
          rows={10}
          cols={50}
        />
      </div>
    );
  }
}

这样设置后，当父组件的formScript变化时，textarea的内容会自动更新；用户编辑时，输入也能实时同步到组件状态，完全满足需求。

解决方案二：用key强制重新渲染非受控组件 #

如果你的场景比较简单，不想用受控组件，也可以通过key属性让React销毁旧组件并重新挂载，这样defaultValue就会重新读取最新的props值。

代码示例：

import React, { Component } from 'react';

export default class RenderedScript extends Component {
  render() {
    return (
      <div>
        {this.props.formScript && (
          <textarea
            defaultValue={this.props.formScript}
            // 用formScript作为key，值变化时触发组件重建
            key={this.props.formScript}
            rows={10}
            cols={50}
          />
        )}
      </div>
    );
  }
}

不过要注意：这种方式会销毁重建textarea组件，如果用户正在编辑时props更新，可能会丢失未保存的输入内容，所以只适合对输入连续性要求不高的场景。

总结 #

优先推荐第一种受控组件的方案，它能更灵活地控制组件状态，也更符合React的设计思想。

内容的提问来源于stack exchange，提问作者Bri Kutauskas