Question

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

例如，这会更新textarea，但无法编辑：

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>
        )
      }

    }

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

Answer 1

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

基本上父母负责控制孩子的价值，直到孩子改变自己的价值为止 - 如果父母更新了价值，孩子的价值将被覆盖。

Answer 2

正常情况下，textarea不会更新道具更改，因为您设置了defaultValue
您应该决定是否应该控制您的组件对于不受控制的组件，这可以完成工作，您只需要在需要时获取值

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

的文章

Textarea不会更新道具更新：使用React

2 个答案: