ReactJS : 다른 구성 요소를 업데이트하는 방법

Question

textarea 문자 카운터 위젯을 사용하는 방법을 배우려면 ReactJS을 쓰려고하는데, 화재로 값을 설정할 수있는 방법은 무엇입니까 textarea onChange 이벤트. 수 나는 currentLength을 설정하는 방법, 내가 TextStatus 구성 요소의 상태를 변경하는 방법에 확실하지 않다 TextArea 구성 요소에 의해 소유 onTextChanged 방법에서

/** 
* @jsx React.DOM 
*/ 

var EditorWidget = React.createClass({ 
    render : function() { 
     return (
      <div className="editor-widget"> 
       <h4 className="title">Titolo articolo</h4> 
       <TextArea maxLength={this.props.maxLength}/> 
       <footer> 
        <TextStatus maxLength={this.props.maxLength} currentLength={this.props.currentLength}/> 
        <ActionButton /> 
       </footer> 
      </div> 
     ); 
    } 
}); 

var TextArea = React.createClass({ 
    onTextChanged : function(event) { 
     // how to update currentLength for TextStatus component? 
     this.props.currentLength = event.target.value.length; 
    }, 
    render : function() { 
     return (
      <textarea onChange={this.onTextChanged} maxLength={this.props.maxLength} placeholder="Lampadario con catino romagnolo"></textarea> 
     ); 
    } 
}); 

var TextStatus = React.createClass({ 
    render : function() { 
     return (
      <div className="info"> 
       Caratteri<span className="small-left-margin">{this.props.currentLength}/{this.props.maxLength}</span> 
      </div> 
     ); 
    } 
}); 

var ActionButton = React.createClass({ 
    render : function() { 
     return (
      <div className="action remove"> 
       Rimuovi elemento 
      </div> 
     ); 
    } 
}); 

React.renderComponent(
    <EditorWidget maxLength="15" currentLength="0"/>, 
    document.getElementById("container") 
); 

:

이

내가 응용 프로그램을 작성했습니다 방법입니다 TextStatus 구성 요소?

Answer 1

다른 구성 요소를 업데이트하지 마십시오.

대신 구성 요소가 공유 최상위 데이터 모델에서 렌더링됩니다. 콜백은 구성 요소로 전달됩니다. 이들 중 어느 하나가 콜백을 통해 해당 데이터 모델에 대한 데이터 변경을 트리거 할 수 있습니다. 모델이 다시 렌더링을 트리거해야합니다. 모든 구성 요소에 새로운 값이 추가되었습니다. https://stackoverflow.com/a/24251931/131227이

Answer 2

나는 그것이 좋은 방법이라고 생각하지 않지만, 당신이 수행 할 수 있습니다 :

내 대답은 여기의 예를 제공

이 TextStatus 구성 요소에 대한 참조를 추가를

<TextStatus ref="textStatus" ... /> 

그런 다음 TextArea 구성 요소에서 다음과 같이 액세스 할 수 있습니다.

onTextChanged : function(event) { 
    this.props.currentLength = event.target.value.length; 

    // You need to add a textLength state to your TextStatus, then 
    this._owner.refs['textStatus'].setState({ 
     currentLength: this.props.currentLength; 
    }); 
} 

귀하의 TextStatus는 다음과 같이 될 : 당신은 공용 API 만 상태와 소품을 수정할 수 없습니다

var TextStatus = React.createClass({ 
    getInitialState: function() { 
     return { 
      currentLength: 0 
     }; 
    }, 
    render : function() { 
     return (
      <div className="info"> 
       Caratteri<span className="small-left-margin">{this.state.currentLength}/ {this.props.maxLength}</span> 
      </div> 
     ); 
    } 
}); 

Answer 3

. 따라서 currentLength를 EditorWidget의 상태로 옮겨야합니다. 우리는 EditorWidget에이 방법을 추가

getInitialState: function() { 
    return {currentLength: 0}; 
}, 

및 this.state 대신 this.props 사용하여 값을 전달 : <TextStatus currentLength={this.state.currentLength}합니다. currentLength가 변경 될 때마다 TextStatus가 새 값으로 업데이트됩니다.

이제 텍스트 영역이 변경 이벤트를 내보낼 때마다 상태가 업데이트되어야합니다. Textarea는 TextStatus 구성 요소에 Change 이벤트를 내 보냅니다. TextStatus 구성 요소는 새로운 길이 값을 전달하는 사용자 정의 이벤트를 발생시켜 반응합니다. 이 커스텀 이벤트 "TextChange"를 호출 해 봅시다.

위에서 아래로 진행합니다. EditorWidget, 우리는 길이 및 업데이트 currentLength를 읽고 TextChange에 대한 핸들러, 추가

handleTextChange: function(length) { 
    this.setState({currentLength: length}); 
}, 

을하고 주위를 전달합니다 <TextArea onTextChange={this.handleTextChange}합니다. 텍스트 영역에서, 우리는 onTextChange를 통해 새 길이를 방출 변경에 대한 핸들러 추가

handleChange : function(event) { 
    var length = event.target.value.length; 
    this.props.onTextChange(length); 
}, 

및 텍스트 영역에 전달할 : <textarea onChange={this.handleChange}합니다.

이제 끝났습니다.사용자가 텍스트 영역에 텍스트를 입력 할 때마다 이벤트는 EditorWidget까지 구성 요소 계층을 위로 올려 놓습니다. EditorWidget은 상태를 업데이트하고 TextStatus를 포함하여 자식의 다시 렌더링을 트리거합니다.