Javascript 回应,我刚刚开始编码,我有一个问题
我现在正在做一个tic-tac-toe游戏,我想在单击另一个对象后更改随机MyClickable对象的类名,但我找不到方法。谢谢你的帮助Javascript 回应,我刚刚开始编码,我有一个问题,javascript,reactjs,class,object,Javascript,Reactjs,Class,Object,我现在正在做一个tic-tac-toe游戏,我想在单击另一个对象后更改随机MyClickable对象的类名,但我找不到方法。谢谢你的帮助 导出默认类框扩展组件{ render(){ 返回( ); } } 让botPlay=()=>{ 可点击性-- } 让超时=()=>{ 设置超时(botPlay,1500) } 让点击率=0 类MyClickable扩展组件{ 状态={ 类名:“a” }tl;dr您需要将游戏板存储为状态,并将值作为道具传递给MyClickable。然后MyClickable只
导出默认类框扩展组件{
render(){
返回(
);
}
}
让botPlay=()=>{
可点击性--
}
让超时=()=>{
设置超时(botPlay,1500)
}
让点击率=0
类MyClickable扩展组件{
状态={
类名:“a”
}
tl;dr您需要将游戏板存储为状态,并将值作为道具传递给MyClickable
。然后MyClickable
只需查看它的值道具-例如null
、X
或O
,它根据值道具管理自己的类名
完整解决方案:
因此,从你的州开始-它应该可以重新预订一个tic-tac趾板,看起来像这样:
[
[null,null,null],
[null,null,null],
[null,null,null],
]
现在我们还需要知道轮到谁了,所以让我们也把它添加到state中(我们将从X开始)
很好,现在我们知道我们的状态应该是什么样子了,让我们制作组件:
expport class Board extends React.Component = {
constructor() {
this.state = {
playerTurn: 'X',
board: [
[null,null,null],
[null,null,null],
[null,null,null],
]
}
}
// when this is called, we update our board state and we change the player turn from X to O (or vice versa)
handleClick = (row,col) => {
// number 1 rule of React - don't mutate state (or props, or anything really)
const nextBoard = [...this.state.board];
// change the next turn to X, or O, depending on whose turn it is currently
const nextTurn = this.state.playerTurn === 'X' ? 'O': 'X';
// set the value of the board at row/col to X or O, depending on whose turn it is currently
nextBoard[row][col] = this.state.playerTurn;
// at this point you can determine if the game is over or not
this.setState({playerTurn:nextTurn,board:nextBoard});
}
// helper - tells us if the game is over
winner = () => {
// return X if X has one, based on the state, or O is O has won, or null if nobody has won
// leave this up to you to implement
}
render() {
// if we have a winner, we can show who won!
const winner = this.winner();
if(winner) {
return <div>{winner} won!</div>
}
// if we don't have a winner, show the game board
return (
<div className="box">
{
this.state.board.map((row,i) =>
row.map((value,m) => (
<MyClickable
// if this already has a value, pass undefined as `onClick`
onClick={value ? undefined : () => this.handleClick(i,m)}
value={value}
/>
))
)
}
</div>
)
}
}
如果要更改由MyClickable
组件呈现的div的类名,只需查看value
——它将是null
、X
或O
:
const MyClickable = ({onClick,value}) => {
return (
<div className={value == null ? 'clickable' : 'already-clicked'} onClick={onClick}>
{value}
</div>
)
}
constmyclickable=({onClick,value})=>{
返回(
{value}
)
}
您需要类似于…
的东西。现在更改状态以更改类名。此外,(即,将九个框中的每个框的状态改为父框的状态,并使用道具将其传递下去)感谢您的帮助!
const MyClickable = ({onClick,value}) => {
return (
<div onClick={onClick}>
{value}
</div>
)
}
const MyClickable = ({onClick,value}) => {
return (
<div className={value == null ? 'clickable' : 'already-clicked'} onClick={onClick}>
{value}
</div>
)
}