Textarea не обновляется при обновлении реквизита: с помощью React

Question

Мне нужно обновить значение по умолчанию текстовой области на основе реквизита из родительского компонента. По какой-то причине он обновляется при установке значения, но не при установке значения по умолчанию. К сожалению, мне нужно, чтобы текстовая область была редактируемой пользователем, поэтому значение настройки будет недостаточным.

Например, это обновляет текстовую область, но не может быть отредактировано:

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

Это нормально, что текстовое поле не обновляется при изменении реквизита, так как вы устанавливаете значение по умолчанию
Вы должны решить, следует ли контролировать ваш компонент или нет
Для неконтролируемого компонента это делает свою работу, вам просто нужно получить значение при необходимости

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
Вот статья о контролируемых и неуправляемых входах

Answer 2

Взгляните на этот пример: https://codesandbox.io/s/lznvmmjjz

Обычно родительский элемент отвечает за управление значением дочернего элемента, пока дочерний элемент не изменит свое собственное значение - если родительский объект обновит значение, значение дочернего элемента будет перезаписано.