ReactJS：如何从另一个组件更新组件

我正在尝试写一个简单的textarea字符计数器小部件ReactJS http://facebook.github.io/react/学习如何使用它，但我现在知道如何通过火来设定价值textarea onChange event.

这就是我编写应用程序的方式：

/**
 * @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")
);

From onTextChanged方法拥有者TextArea我不确定如何更改组件的状态TextStatus组件，我该如何设置currentLength of TextStatus成分？

您无法使用公共 API 修改 prop，只能修改state。所以我们应该首先将 currentLength 移动到 EditorWidget 的状态。我们将此方法添加到 EditorWidget 中：

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

并使用传递值this.state代替this.props: <TextStatus currentLength={this.state.currentLength}。每次 currentLength 更改时，TextStatus 都会更新为新值。

现在我们需要在每次文本区域发出 Change 事件时更新状态。我们可以将其分为 2 个步骤：textarea 向 TextStatus 组件发出 Change 事件，该组件通过发出携带新长度值的自定义事件进行反应。我们将此自定义事件称为“TextChange”。

我们从上到下进行。在 EditorWidget 中，我们为 TextChange 添加一个处理程序，用于读取长度并更新 currentLength：

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

并传递它：<TextArea onTextChange={this.handleTextChange}。在 TextArea 中，我们添加一个 Change 处理程序，通过 onTextChange 发出新的长度：

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

并将其传递到文本区域：<textarea onChange={this.handleChange}.

我们完成了。每次用户在文本区域中键入一些文本时，事件都会在组件层次结构中向上冒泡到 EditorWidget，后者会更新其状态并触发其子级（包括 TextStatus）的重新渲染。