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

将状态从指标移动到计算器。在Button类中触发位于Calculator中的this.props.add。所以你有一个父（计算器）和2个孩子（按钮，指示器）。

将状态发送给孩子们

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

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

1 个答案: