Textarea 不更新道具更新：使用 React答案

【问题标题】：Textarea does not update on props update: using ReactTextarea 不更新道具更新：使用 React
【发布时间】：2018-04-26 19:00:36
【问题描述】：

我需要根据父组件的 props 更新 textarea 的默认值。出于某种原因，它会在设置值时更新，但在设置 defaultValue 时不会更新。不幸的是，我需要用户可以编辑文本区域，因此设置值是不够的。

例如这会更新文本区域，但不能编辑：

import React, {Component} from 'react';

export default class RenderedScript extends Component {

  render(){
    return(
      <div>
        {this.props.formScript && 
         <textarea value={this.props.formScript}></textarea>}
      </div>
    )
  }

}

这可以编辑，但不会在道具更改时更新：

export default class RenderedScript extends Component {
    render(){
        return(
          <div>
            {this.props.formScript && 
             <textarea defaultValue={this.props.formScript}></textarea>}
          </div>
        )
      }

    }

任何建议都会有所帮助。谢谢！

【问题讨论】：

标签： javascript reactjs components textarea

【解决方案1】：

看看这个例子：https://codesandbox.io/s/lznvmmjjz

基本上父级负责控制子级的值，直到子级改变自己的值——如果父级更新值，子级的值将被覆盖。

【讨论】：

【解决方案2】：

当您设置默认值时，文本区域不会在道具更改时更新是正常的
您应该决定是否应该控制您的组件
对于不受控制的组件，这可以完成工作，您只需要在需要时获取值

class RenderedScript extends React.Component {
    render(){
        return(
          <div>
            {this.props.formScript && 
             <textarea defaultValue={this.props.formScript}></textarea>}
          </div>
        );
    }
 }


ReactDOM.render(<RenderedScript formScript="default" />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="app"></div>

如果你需要一个受控组件，你可以通过设置 onChange 监听器来处理值的变化
这是一篇关于contolled and uncontrolled inputs的文章

【讨论】：