Компонент ReactJS, не отображающий textarea с переменной состояния

я сталкиваюсь с интригующей ошибкой в React.

у меня есть этот компонент:

'use strict';
import SummaryStore from '../stores/SummaryStore';
import React from 'react';

export default class ChangeSummaryForm extends React.Component {
   constructor() {
       // store initialisation
       SummaryStore.register();

       var vRating = SummaryStore.getBookForSummaryPrint().summaryRating;
       var vStarClassName = this.getRatingClasses(vRating);
       this.state = {
            sStarClassName: vStarClassName,
            sCurrentBookToShow: SummaryStore.getBookForSummaryPrint()
       };

        this.thereIsASummaryToShow = this.thereIsASummaryToShow.bind(this);
    }

  getRatingClasses(pRating) {
      var vI, vStarClassName = [];
       for(vI = 0; vI < 4; vI++) {
          if(pRating > 0) {
             vStarClassName.push("glyphicon glyphicon-star");
             pRating--;
          } else {
             vStarClassName.push("glyphicon glyphicon-star-empty");
          }
       }
      return vStarClassName;
  }
  componentDidMount() {
    SummaryStore.addChangeListener(this.thereIsASummaryToShow);
  }

  componentWillUnmount() {
    SummaryStore.removeChangeListener(this.thereIsASummaryToShow);
  }

  thereIsASummaryToShow() {

      this.setState({sCurrentBookToShow: SummaryStore.getBookForSummaryPrint(),
                     sStarClassName: this.getRatingClasses(SummaryStore.getBookForSummaryPrint().rating)
                    });
      $("#summaryModal").modal('show');
    }
    render() {
        return (<div className="modal fade" id="summaryModal">
                  <form>
                    <div className="modal-dialog">
                    <div className="modal-content">
                      <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" ariaLabel="Close"><span ariaHidden="true">&times;                  </span>                           </button>
                <div style={{color: 'black'}}>
                    {this.state.sStarClassName.map(function(pCurrentClassName) { return (<span className={pCurrentClassName}></span>
                                                                                   );
                                                                                 })}
                        <h4 className="modal-title">Summary of {this.state.sCurrentBookToShow.title}</h4>
                </div>
                      </div>
                      <div className="modal-body">

                            <div className="form-group">
                                <textarea className="form-control" rows="22" ref="summaryContent" >{this.state.sCurrentBookToShow.summary}</textarea>
                            </div>

                      </div>
                      <div className="modal-footer">
                        <button type="button" className="btn btn-default" data-dismiss="modal" >Close</button>
                        <input type="submit" className="btn btn-primary" value="Save"/>
                      </div>
                    </div>
                  </div>
                    </form>
                </div>
               );
    }
}

как вы могли заметить, это

11
javascript reactjs textarea

3 ответов

проверьте эту ссылку из react docs:React Textarea Значение

в основном для textArea react не поддерживает текст, заключенный внутри, и вам скорее нужно указать, что как value или defaultValue.

правильный путь таким образом 

<textarea name="description" value="This is a description." />

или

<textarea name="description" defaultValue="This is a description." />

разница с value и defaultValue это задание defaultValue листья компонента неконтролируемый:

с неконтролируемым компонентом часто требуется React, чтобы указать начальное значение, но оставить последующие обновления неконтролируемыми. Для обработки этого случая можно указать атрибут defaultValue вместо value.

...в то время как задание value инструктирует реагировать на управление компонентом, что означает, что вам нужно обновить свойство value, чтобы убедиться, что изменение отражено в компоненте:

поскольку атрибут value установлен на нашем элементе формы, отображаемое значение всегда будет таким.государство.ценность, делающая реактивное состояние источником истины.

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

21

на самом деле это именно то, что неправильно. От docs:

Если вы хотите инициализировать компонент непустым значением, вы можете предоставить prop defaultValue.

0

у меня была та же проблема. Я решил его с помощью контролируемого компонента, например

state.value = this.props.value 
<textarea value={this.state.value} onchange={handler} />

Он отлично работает для управления входной частью. Однако у меня была другая проблема, мне нужно init/изменить состояние.значение для реквизита.значение при повторной визуализации.

я использовал методы цикла подъема, и он отлично работает.

componentWillReceiveProps: function(){
    this.setState({
        value: this.props.value
    }) }

надеюсь, что это помогает.

-3