无法使用 ReactJs 中的按钮功能使 Div 值为空
Can't Make Div Value Empty with button function in ReactJs
我想在井字游戏中添加一个重置按钮。它应清除每个 div 元素中的值。我想出的函数(见下文)清除了控制台中的值,但在 UI 中它仍然是 X 或 O。我在构造函数中定义了一个状态,如板:Array(9).fill('')
。然后我在点击事件目标属性的帮助下获取值 X 或 Y。这是我的示例代码:
class App extends Component {
constructor(){
super();
this.state = {
turn: 'X',
gameEnded: false,
board: Array(9).fill(''),
totalMoves : 0
}
}
clicked(event){
if(this.state.gameEnded == true) return;
if( this.state.board[event.target.dataset.square] === ''){
this.state.board[event.target.dataset.square] = this.state.turn;
event.target.innerText = this.state.turn;
this.setState({
turn: this.state.turn === 'X' ? 'O' :'X',
totalMoves: this.state.totalMoves+1
})
}
var result = this.checkWinner();}
reset(){
var board = this.state.board;
for(let j=0;j < 9 ; j++){
board[j] = null;
}
console.log(this.state.board);}
render() {
return (
<div id="board" onClick={(e)=>this.clicked(e)}>
<div className= "square" data-square= "0" ></div>
<div className= "square" data-square= "1"></div>
<div className= "square" data-square= "2"></div>
<div className= "square" data-square= "3"></div>
<div className= "square" data-square= "4"></div>
<div className= "square" data-square= "5"></div>
<div className= "square" data-square= "6"></div>
<div className= "square" data-square= "7"></div>
<div className= "square" data-square= "8"></div>
</div>
<div id="foot"><button className="button" onClick={()=>this.reset()}>Reset</button></div>
</div>
); }}
你的重置函数应该是这样的:
reset(){
var newBoard = Array(9).fill('');
this.setState({board:newBoard});
}
@10101010 - 使用对现有状态数组的引用不是一个好主意。它可能会导致错误的行为。始终选择复制数据,然后设置状态。
您需要将 state.board
数组渲染为 DOM。
应用流程应该是 state.board -> render -> div values
我没有为游戏设置样式,但我试图展示一种快速方法,以便您了解如何解决问题。无需为您的 Divs 设置内部文本,您需要将状态绑定到它。这是一个简单的工作示例。您可以自己编辑和自定义它。
class App extends React.Component {
constructor() {
super();
this.state = {
turn: 'X',
gameEnded: false,
board: Array(9).fill(''),
totalMoves: 0
}
}
clicked(event) {
if (this.state.gameEnded == true) return;
if (this.state.board[event.target.dataset.square] === '') {
this.state.board[event.target.dataset.square] = this.state.turn;
this.setState({
turn: this.state.turn === 'X' ? 'O' : 'X',
totalMoves: this.state.totalMoves + 1
})
}
}
reset() {
this.setState({
board: Array(9).fill('')
})
}
render() {
return (
<div id = "board"
onClick = {
(e) => this.clicked(e)
} >
<div className = "square" data-square = "0" >{this.state.board[0]}< /div>
<div className = "square" data-square = "1" >{this.state.board[1]}< /div>
<div className = "square" data-square = "2" >{this.state.board[2]}< /div>
<div className = "square" data-square = "3" >{this.state.board[3]}< /div>
<div className = "square" data-square = "4" >{this.state.board[4]}< /div>
<div className = "square" data-square = "5" >{this.state.board[5]}< /div>
<div className = "square" data-square = "6" >{this.state.board[6]}< /div>
<div className = "square" data-square = "7" >{this.state.board[7]}< /div>
<div className = "square" data-square = "8" >{this.state.board[8]}< /div>
<div id = "foot" > < button className = "button"
onClick = {
() => this.reset()
} > Reset < /button></div >
</div>
);
}
}
ReactDOM.render( <
App / > ,
document.getElementById('root')
);
.square {
border: 1px solid red;
width: 20px;
height: 20px;
}
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root" />
我想在井字游戏中添加一个重置按钮。它应清除每个 div 元素中的值。我想出的函数(见下文)清除了控制台中的值,但在 UI 中它仍然是 X 或 O。我在构造函数中定义了一个状态,如板:Array(9).fill('')
。然后我在点击事件目标属性的帮助下获取值 X 或 Y。这是我的示例代码:
class App extends Component {
constructor(){
super();
this.state = {
turn: 'X',
gameEnded: false,
board: Array(9).fill(''),
totalMoves : 0
}
}
clicked(event){
if(this.state.gameEnded == true) return;
if( this.state.board[event.target.dataset.square] === ''){
this.state.board[event.target.dataset.square] = this.state.turn;
event.target.innerText = this.state.turn;
this.setState({
turn: this.state.turn === 'X' ? 'O' :'X',
totalMoves: this.state.totalMoves+1
})
}
var result = this.checkWinner();}
reset(){
var board = this.state.board;
for(let j=0;j < 9 ; j++){
board[j] = null;
}
console.log(this.state.board);}
render() {
return (
<div id="board" onClick={(e)=>this.clicked(e)}>
<div className= "square" data-square= "0" ></div>
<div className= "square" data-square= "1"></div>
<div className= "square" data-square= "2"></div>
<div className= "square" data-square= "3"></div>
<div className= "square" data-square= "4"></div>
<div className= "square" data-square= "5"></div>
<div className= "square" data-square= "6"></div>
<div className= "square" data-square= "7"></div>
<div className= "square" data-square= "8"></div>
</div>
<div id="foot"><button className="button" onClick={()=>this.reset()}>Reset</button></div>
</div>
); }}
你的重置函数应该是这样的:
reset(){
var newBoard = Array(9).fill('');
this.setState({board:newBoard});
}
@10101010 - 使用对现有状态数组的引用不是一个好主意。它可能会导致错误的行为。始终选择复制数据,然后设置状态。
您需要将 state.board
数组渲染为 DOM。
应用流程应该是 state.board -> render -> div values
我没有为游戏设置样式,但我试图展示一种快速方法,以便您了解如何解决问题。无需为您的 Divs 设置内部文本,您需要将状态绑定到它。这是一个简单的工作示例。您可以自己编辑和自定义它。
class App extends React.Component {
constructor() {
super();
this.state = {
turn: 'X',
gameEnded: false,
board: Array(9).fill(''),
totalMoves: 0
}
}
clicked(event) {
if (this.state.gameEnded == true) return;
if (this.state.board[event.target.dataset.square] === '') {
this.state.board[event.target.dataset.square] = this.state.turn;
this.setState({
turn: this.state.turn === 'X' ? 'O' : 'X',
totalMoves: this.state.totalMoves + 1
})
}
}
reset() {
this.setState({
board: Array(9).fill('')
})
}
render() {
return (
<div id = "board"
onClick = {
(e) => this.clicked(e)
} >
<div className = "square" data-square = "0" >{this.state.board[0]}< /div>
<div className = "square" data-square = "1" >{this.state.board[1]}< /div>
<div className = "square" data-square = "2" >{this.state.board[2]}< /div>
<div className = "square" data-square = "3" >{this.state.board[3]}< /div>
<div className = "square" data-square = "4" >{this.state.board[4]}< /div>
<div className = "square" data-square = "5" >{this.state.board[5]}< /div>
<div className = "square" data-square = "6" >{this.state.board[6]}< /div>
<div className = "square" data-square = "7" >{this.state.board[7]}< /div>
<div className = "square" data-square = "8" >{this.state.board[8]}< /div>
<div id = "foot" > < button className = "button"
onClick = {
() => this.reset()
} > Reset < /button></div >
</div>
);
}
}
ReactDOM.render( <
App / > ,
document.getElementById('root')
);
.square {
border: 1px solid red;
width: 20px;
height: 20px;
}
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root" />