gpt4 book ai didi

javascript - 单击按钮更改组件状态

转载 作者:太空狗 更新时间:2023-10-29 15:00:30 24 4
gpt4 key购买 nike

以下是HTML。

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

下面是Javscript

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

还有一些CSS

#game-container {
position: relative;
margin-top: 32px;
border: 1px solid black;
width: 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;

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

但它不起作用。

最佳答案

你不能像那样设置 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){
/* get the element id and do the enum things here */
this.setState({
size: newSize
});
}
render: function(){
...
...
}
});

然后只需将所有 componentWillMount 样式的内容移动到 render 函数即可。

更新

fiddle :https://jsfiddle.net/dannyjolie/r525ux66/

关于javascript - 单击按钮更改组件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36183304/

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