ReactJS 구성 요소가 상태 변수를 사용하여 텍스트 영역을 렌더링하지 않음

ReactJS 구성 요소가 상태 변수를 사용하여 텍스트 영역을 렌더링하지 않음

나는 리액트에서 흥미로운 버그를 마주하고 있다.

다음 컴포넌트가 있습니다.

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

보시다시피 앱 디스패처에 등록된 스토어에서의 컨트롤러 뷰 리스닝입니다.

위의 절차는 올바르게 수행되었습니다.즉, 특정 액션이 트리거되면 내 컴포넌트가 변수와 함께 올바르게 렌더링됩니다.{this.state.sCurrentBookToShow.title}그리고.this.state.sCurrentBookToShow.title최신의

이 문제는 이 부분에서 발생합니다.

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

텍스트 영역에는 문자열이 인쇄되지 않습니다.

디버깅을 시도했습니다.

    render() {
     var summary = "this is a summary";
     return (// .. shortened for brevity
      <textarea className="form-control" rows="22" ref="summaryContent">
       {summary}
    </textarea> ..);
    }

그summary문자열이 변환 가능한 텍스트 영역 안에 올바르게 인쇄됩니다.

브라우저에 다음과 같이 표시됩니다.

경고:를 사용합니다.defaultValue또는value아이를 태우는 대신 소품<textarea>.

하지만 현재의 문제에는 영향이 없다고 생각하기 때문에 나중에 수정하겠습니다.

편집: 귀하의 의견을 참고하여 코드를 다음과 같이 업데이트했습니다.

                <h4 className="modal-title">Summary of {this.state.sCurrentBookToShow.summary}</h4>
        </div>
              </div>
              <div className="modal-body">

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

• 교체했습니다.this.state.sCurrentBookToShow.title타고.summary사다리가 비어있지 않은지 확인합니다.
• 요약한 내용을 정리했습니다.defaultValue받침대

출력은 다음과 같습니다.

두 번째 편집:

이슈를 강조하는 샘플 앱을 올렸습니다.이것이 적절한 해결책을 찾는 데 도움이 되기를 바란다.

리액트 문서에서 다음 링크를 확인합니다.React Textarea Value

기본적으로 textArea react는 안에 둘러싸인 텍스트를 지원하지 않으므로 또는 로 지정해야 합니다.

올바른 방법은

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

또는

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

와의 차이점value그리고.defaultValue지정하면 컴포넌트가 제어되지 않습니다.

제어되지 않는 구성 요소의 경우 React에서 초기 값을 지정하지만 후속 업데이트는 제어되지 않은 상태로 두도록 하는 경우가 많습니다.이 경우 값 대신 defaultValue 속성을 지정할 수 있습니다.

...지정 중 React는 컴포넌트를 제어하도록 지시합니다.즉, 변경 내용이 컴포넌트에 반영되도록 값 속성을 업데이트해야 합니다.

폼 요소에 값 속성이 설정되어 있기 때문에 표시되는 값은 항상 this.state.value가 되므로 React 상태가 true의 소스가 됩니다.

값/기본값의 차이를 명확하게 파악하려면 다음 항목을 확인하십시오.Fidle for value Default Value Distribution Console은 항상 새로운 값을 표시하지만 구성 요소는 표시하지 않습니다.

사실 그것이 바로 잘못된 것이다.문서에서:

값이 비어 있지 않은 구성 요소를 초기화하려면 defaultValue 프로포트를 제공할 수 있습니다.

저도 같은 문제가 있었어요.제어된 컴포넌트를 사용하여 해결했습니다.

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

입력 부품을 제어하면 정상적으로 동작합니다.그런데 또 다른 문제가 있어서 리렌더가 있을 때마다 state.value를 propos.value로 초기화/변경해야 합니다.

리프트 사이클 방식을 사용했는데 완벽하게 잘 작동합니다.

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

이게 도움이 되길 바라

언급URL : https://stackoverflow.com/questions/30730369/reactjs-component-not-rendering-textarea-with-state-variable