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

Question

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

例如，这会更新文本区域，但无法编辑：

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

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

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

Textarea does not update on props update: using React

javascript

components

textarea

reactjs