gpt4 book ai didi

javascript - 如何在 React 中改变另一个对象的状态

转载 作者:行者123 更新时间:2023-12-03 08:48:25 24 4
gpt4 key购买 nike

美好的一天。您能告诉我如何从另一个对象的对象单击操作中访问某个对象的更改状态吗?

我有元素计算器,其中有一组按钮和一个指示器。我想更改单击某些按钮时指示器的状态。例如,如果单击任何按钮,则增加指示器值;

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

如果您知道如何改进代码,请发布您的变体。感谢您抽出时间。

最佳答案

将状态从指示器移至计算器。在按钮类中触发位于计算器中的 this.props.add 。所以你有一个父级(计算器)和 2 个子级(按钮、指示器)。

将状态发送给子级

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

关于javascript - 如何在 React 中改变另一个对象的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32783968/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com