按钮单击更改组件状态 [英] Change component state on button click
问题描述
以下是HTML。
< script src =https：//fbcdn-dragon-a.akamaihd达网络/ hphotos-AK-xtp1 / t39.3284-6 / 12624079_897774290317920_1379776191_n.js>< /脚本>
< script src =https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfp1/t39.3284-6/12624052_751451571621845_431133942_n.js>< / script>
< script src =https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js>< /脚本>
< div class =rowid =container>
< div class =controls>
< span class =id =controls-size>大小：
< button id =controls-size-small> SMALL< / button>
< button id =controls-size-med> MEDIUM< / button>
< button id =controls-size-large> LARGE< / button>
< / span>
< / div>
< div id =game-container>
< / div>
< / div>
以下是Javscript
var SizeEnum = {
小：1，
中等：2，
大：3
};
var Board = React.createClass（{
getInitialState：function（）{
return {
size：SizeEnum.MEDIUM
};
），
componentWillMount：function（）{
if（this.state.size == SizeEnum.SMALL）{
this.style = {
width： 600 +'px'，
height：320 +'px'，
margin：'auto'，
border：'2px solid red'
}
} else if（this.state.size == SizeEnum.MEDIUM）{
this.style = {
width：700 +'px'，
height：500 +'px'，
margin：'auto'，
border：'2px solid red'
}
} else if（this.state.size == SizeEnum.LARGE）{
this.style = {
width：900 +'px'，
height：720 +'px'，
margin：'auto'，
border：'2px红色'b $ b}
}
}，
render：function（）{
return（< div style = {
this.style
}> < / DIV>
）
}
}）;
ReactDOM.render（< Board />，document.getElementById（game-container））;
和一些CSS
＃game-container {
position：relative;
margin-top：32px;
border：1px纯黑色;
宽度：100％;
}
我想要的是当单击适当的按钮时，Board组件调整到适当的大小。
我试过这样做
var board = ReactDOM.render（< Board /> ;, document.getElementById（game-container））;
document.getElementById（controls-size-small）。onclick = changeBoardSize;
document.getElementById（controls-size-med）。onclick = changeBoardSize;
document.getElementById（controls-size-large）。onclick = changeBoardSize;
函数changeBoardSize（event）{
var etid = event.target.id;
console.log（etid）;
if（etid ==controls-size-small）{
// method 1
board.state.size = SizeEnum.SMALL;
} else if（etid ==controls-size-med）{
// method 2
board.state.size = SizeEnum.MEDIUM;
ReactDOM.render（< Board /> ;, document.getElementById（game-container））;
} else if（etid ==controls-size-small）{
// method 3
board.setState（{size：SizeEnum.SMALL}）;
ReactDOM.render（< Board /> ;, document.getElementById（game-container））;
}
}
但它不起作用。
不能像这样设置React组件的状态。组件应该负责设置自己的状态。
在你的Board组件中，在componentDidMount中设置事件监听器。最好的解决方案是让按钮成为React应用程序的一部分，但这超出了这个问题的范围。假设按钮不是React应用程序的一部分，然后执行如下操作：
var Board = React.createClass （{
...
...
componentDidMount：function（）{
var that = this;
document.getElementById（controls-size-small ）.addEventListener（'click'，that.changeBoardSize，false）;
document.getElementById（controls-size-med）。addEventListener（'click'，that.changeBoardSize，false）;
document .getElementById（controls-size-large）。addEventListener（'click'，that.changeBoardSize，false）;
}
changeBoardSize：function（e）{
/ *获取元素ID并在这里执行枚举操作* /
this.setState（{
size：newSize
}）;
}
render：function（） {
...
...
}
}）;
然后将所有componentWillMount风格的东西移动到 更新 小提琴： https://jsfiddle.net/dannyjolie/r525ux66/ The following is the HTML. The following is the Javscript And some CSS What I want is that when the appropriate button is clicked, the Board component be resized to the appropriate size. I've tried doing it like this But it doesn't work. You can't set the state of a React component like that. And the component should be responsible for setting its own state. Inside your Board component, set up event listeners in componentDidMount. The best solution would be to let the buttons be part of the React application, but that's beyond the scope of this question. So let's say that the buttons are not part of the React application, then do something like this: Then just move all that componentWillMount style stuff to the Update Fiddle: https://jsfiddle.net/dannyjolie/r525ux66/ 这篇关于按钮单击更改组件状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ render
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xtp1/t39.3284-6/12624079_897774290317920_1379776191_n.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfp1/t39.3284-6/12624052_751451571621845_431133942_n.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<div class="row" id="container">
<div class="controls">
<span class="" id="controls-size">Size :
<button id="controls-size-small">SMALL</button>
<button id="controls-size-med">MEDIUM</button>
<button id="controls-size-large">LARGE</button>
</span>
</div>
<div id="game-container">
</div>
</div>
var SizeEnum = {
SMALL: 1,
MEDIUM: 2,
LARGE: 3
};
var Board = React.createClass({
getInitialState: function() {
return {
size: SizeEnum.MEDIUM
};
},
componentWillMount: function() {
if (this.state.size == SizeEnum.SMALL) {
this.style = {
width: 600 + 'px',
height: 320 + 'px',
margin: 'auto',
border: '2px solid red'
}
} else if (this.state.size == SizeEnum.MEDIUM) {
this.style = {
width: 700 + 'px',
height: 500 + 'px',
margin: 'auto',
border: '2px solid red'
}
} else if (this.state.size == SizeEnum.LARGE) {
this.style = {
width: 900 + 'px',
height: 720 + 'px',
margin: 'auto',
border: '2px solid red'
}
}
},
render: function() {
return ( < div style = {
this.style
} > < /div>
)
}
});
ReactDOM.render(<Board / > , document.getElementById("game-container"));
#game-container {
position: relative;
margin-top: 32px;
border: 1px solid black;
width: 100%;
}
var board = ReactDOM.render(<Board />, document.getElementById("game-container"));
document.getElementById("controls-size-small").onclick = changeBoardSize;
document.getElementById("controls-size-med").onclick = changeBoardSize;
document.getElementById("controls-size-large").onclick = changeBoardSize;
function changeBoardSize(event) {
var etid = event.target.id;
console.log(etid);
if (etid == "controls-size-small") {
// method 1
board.state.size = SizeEnum.SMALL;
} else if (etid == "controls-size-med") {
// method 2
board.state.size = SizeEnum.MEDIUM;
ReactDOM.render(<Board />, document.getElementById("game-container"));
} else if (etid == "controls-size-small") {
// method 3
board.setState({size: SizeEnum.SMALL});
ReactDOM.render(<Board />, document.getElementById("game-container"));
}
}
var Board = React.createClass({
...
...
componentDidMount: function(){
var that = this;
document.getElementById("controls-size-small").addEventListener('click', that.changeBoardSize, false);
document.getElementById("controls-size-med").addEventListener('click', that.changeBoardSize, false);
document.getElementById("controls-size-large").addEventListener('click', that.changeBoardSize, false);
}
changeBoardSize: function(e){
/* get the element id and do the enum things here */
this.setState({
size: newSize
});
}
render: function(){
...
...
}
});
render function.
