Thành phần ReactJS không hiển thị vùng văn bản có biến trạng thái

Question

Tôi đang đối mặt với một lỗi thú vị trong React.

tôi có thành phần này:

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

Như bạn có thể nhận thấy, đó là một controller-view nghe tại một cửa hàng được đăng ký AppDispatcher tôi.

Các bước trên được thực hiện đúng. tức là, khi hành động cụ thể là triggerd, thành phần của tôi được hiển thị chính xác với các biến số {this.state.sCurrentBookToShow.title} và this.state.sCurrentBookToShow.title được cập nhật.

Vấn đề xuất phát từ phần này:

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

Chuỗi không được in trong khung văn bản.

Tôi cố gắng này để gỡ lỗi:

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

chuỗi summary in một cách chính xác bên trong textearea thể thay đổi.

Lưu ý rằng trình duyệt của tôi nói:

Cảnh báo: Sử dụng defaultValue hoặc value đạo cụ thay vì thiết trẻ em trên <textarea>.

Nhưng tôi sẽ khắc phục điều này sau vì tôi cho rằng nó không ảnh hưởng đến vấn đề hiện tại.

EDIT: tôi đã nhận xét của bạn (cho đến nay) trong việc xem xét, vì vậy tôi cập nhật mã của tôi như vậy:

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

• tôi thay this.state.sCurrentBookToShow.title bởi .summary để làm chắc chắn các bậc thang không phải là trống.
• tôi đặt các bản tóm tắt thành một chỗ dựa defaultValue

Đây là kết quả:

Second chỉnh sửa:

Tôi đã tải lên một mẫu app làm nổi bật vấn đề này. Tôi hy vọng điều này sẽ giúp tìm ra giải pháp thích hợp

Answer 1

Kiểm tra liên kết này từ phản ứng tài liệu: React Textarea Value

Về cơ bản cho textArea phản ứng không hỗ trợ văn bản kèm theo bên trong và bạn thay vì cần phải xác định đó là giá trị hoặc defaultValue.

Cách đúng như vậy là

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

hoặc

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

Sự khác biệt với giá trị và defaultValue được rằng defaultValue bạn luôn có thể thay đổi và sự thay đổi sẽ được phản ánh bởi các thành phần nó là thành phần không kiểm soát được . Nhưng nếu bạn sử dụng giá trị nó trở thành thành phần được kiểm soát và bạn cần phải cập nhật thuộc tính giá trị để đảm bảo rằng thay đổi được phản ánh trong thành phần. Để có ý tưởng rõ ràng về sự khác biệt giữa giá trị/giá trị mặc định, hãy kiểm tra điều này: Fiddle for value Default Value Distinction Bảng điều khiển sẽ luôn hiển thị giá trị mới nhưng thành phần sẽ không hiển thị.

Answer 2

Thực ra đó chính là điều sai. Từ số docs:

Nếu bạn muốn khởi tạo thành phần có giá trị không trống, bạn có thể cung cấp giá trị mặc địnhGiá trị mặc định.

Answer 3

Tôi đã gặp vấn đề tương tự. Tôi đã giải quyết nó bằng cách sử dụng thành phần được kiểm soát, ví dụ:

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

Nó hoạt động tốt để kiểm soát phần đầu vào. Tuy nhiên, tôi đã có một vấn đề khác, tôi cần phải init/thay đổi state.value để props.value bất cứ khi nào có một tái render.

Tôi đã sử dụng các phương pháp tăng vòng và nó hoạt động hoàn hảo.

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

hy vọng điều này sẽ hữu ích.