如何在React中更改另一个对象的状态

Question

美好的一天。 您能说我如何从另一个对象访问对象单击动作中某些对象的更改状态。

我有元素计算器，它具有一组按钮和一个指示器。 我想在单击某些按钮时更改指示器的状态。 例如，如果单击任何按钮，则增量指示器值；

<style>
#calculator table {
    padding: 5px;;
    border: ridge 3px;
}

#calculator table tr td {
    text-align: center;
}

.nav-button, .nav-button button {
    width: 100%;
}

.calc-indicator {
    margin-bottom: 10px;
    margin-top: 5px;
    width: 100%;
}

.calc-indicator input {
    border: solid 1px;
    border-radius: 5px;
    width: 93%;
    padding: 4px;
    text-align: right;
}
</style>


var Indicator = React.createClass({

    getInitialState: function () {
        return {
            value: 0
        }
    },

    render: function () {
        return (
                <div className="calc-indicator">
                    <input type="text" value={this.state.value}/>
                </div>);
    }
});

var Button = React.createClass({

    buttonClicked: function () {
        // here I wanna update Indicators state and render Indicator
    },

    render: function () {
        return (
                <div className="nav-button" id={this.props.digit}
                     onClick={this.buttonClicked.bind(this, "nav-button")}>
                    <button>{this.props.digit}</button>
                </div>
        );
    }
});


var Calculator = React.createClass({

    render: function () {
        return (
                <div id="calculator">
                    <table>
                        <tr>
                            <td colSpan="4">
                                <Indicator />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <Button digit="MC"/>
                            </td>
                            <td>
                                <Button digit="MR"/>
                            </td>
                            <td>
                                <Button digit="M+"/>
                            </td>
                            <td>
                                <Button digit="M"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <Button digit="BS"/>
                            </td>
                            <td>
                                <Button digit="CL"/>
                            </td>
                            <td>
                                <Button digit="C"/>
                            </td>
                            <td>
                                <Button digit="/"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <Button digit="7"/>
                            </td>
                            <td>
                                <Button digit="8"/>
                            </td>
                            <td>
                                <Button digit="9"/>
                            </td>
                            <td>
                                <Button digit="*"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <Button digit="4"/>
                            </td>
                            <td>
                                <Button digit="5"/>
                            </td>
                            <td>
                                <Button digit="6"/>
                            </td>
                            <td>
                                <Button digit="-"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <Button digit="1"/>
                            </td>
                            <td>
                                <Button digit="2"/>
                            </td>
                            <td>
                                <Button digit="3"/>
                            </td>
                            <td>
                                <Button digit="+"/>
                            </td>
                        </tr>
                        <tr>
                            <td colSpan="2">
                                <Button digit="0"/>
                            </td>
                            <td>
                                <Button digit="."/>
                            </td>
                            <td>
                                <Button digit="="/>
                            </td>
                        </tr>
                    </table>
                </div>
        );
    }
});
React.render(<Calculator />, document.body);

如果您知道如何使代码更好，请发布您的变体。 感谢您的时间。

Answer 1

将状态从指示器移动到计算器。 在“按钮类”触发器中，位于“计算器”中的this.props.add。 因此，您有一个父级（计算器）和两个子级（按钮，指示器）。

把国家寄给孩子们

 <Button add={this.add} /> and <Indicator value={this.state.value} />