Question

我正在尝试使用ReactJS编写一个简单的textarea字符计数器窗口小部件来学习如何使用它，但我现在确定如何设置值textarea onChange事件

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

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

从onTextChanged组件所拥有的TextArea方法我不知道如何更改TextStatus组件的状态，如何设置currentLength { {1}}组件？

Answer 1

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

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

并使用this.state代替this.props：<TextStatus currentLength={this.state.currentLength}传递值。每次currentLength更改时，TextStatus都将使用新值进行更新。

现在我们需要每次textarea发出Change事件时更新状态。我们可以将其分解为两个步骤：textarea向TextStatus组件发出一个Change事件，该组件通过发出一个带有新长度值的自定义事件来做出反应。让我们调用此自定义事件＆＃34; TextChange＆＃34;。

我们从上到下继续。在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：<textarea onChange={this.handleChange}。

我们已经完成了。每次用户键入文本区域中的某些文本时，事件会将组件层次结构向上冒泡到EditorWidget，后者会更新其状态并触发其子项的重新呈现，包括TextStatus。

Answer 2

您不会从另一个组件更新组件。

相反：组件从共享的顶级数据模型呈现。回调传递给组件。其中任何一个都可以通过回调触发该数据模型的数据更改。该模型应触发重新渲染。所有组件现在都具有新值。

我在这里的回答提供了一个例子：https://stackoverflow.com/a/24251931/131227

Answer 3

我不认为这是一种很好的做法，但你可以这样做：

添加对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变成这样：

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

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

3 个答案: