代替:
words: ["Rectang", "Circle", "Donut", "A", "Arc", "EL", "Elipses", "DO"],
我将使用:
words: ["Rectang", "Circle", "Donut", "A", "Arc", "EL", "Elipses", "DO"].map(word => ({found: false, word})),
所以每个单词都有一个找到的状态,当你找到一个单词时你必须更新它,你可以用它来划掉单词。就像是:
if (lettersSelected == word.length) {
alert("You find the word: " + word);
state.words = state.words.map(w => (w.word === word ? { word, found: true} : w));
}
在你的 html 中:
{words.map((word, index) => (
<span
key={word.word + index}
className={word.found ? "finded" : ""}
>
{word.word}
<br />
</span>
))}
您的代码已修复:
import React, { Component } from "react";
import { Board } from "../../components/Board";
import "./styles.css";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";
import Button from "react-bootstrap/Button";
//import getWords from '../../utils/words';
import { createGame } from "hunting-words";
const options = {
wordsCross: false,
inverseWord: false,
wordInVertical: true,
wordInHorizontal: true,
wordDiagonalLeft: false,
wordDiagonalRight: false
};
export default class Easy extends Component {
state = {
columns: 16,
rows: 16,
game: new createGame(0, 0, []),
words: ["Rectang", "Circle", "Donut", "A", "Arc", "EL", "Elipses", "DO"].map(word => ({found: false, word})),
};
constructor(props) {
super(props);
}
componentDidMount() {
const { rows, columns, words } = this.state;
this.setState({
game: new createGame(rows, columns, words, options)
});
}
getLetterSelectedSameWord = (word) => {
let lettersSelected = 0;
this.state.game.board.filter((row) => {
lettersSelected =
lettersSelected +
row.filter((el) => {
return el.word === word && el.isSelected;
}).length;
});
return lettersSelected;
};
verifyFindWord = (words) => {
for (let word of words) {
let lettersSelected = this.getLetterSelectedSameWord(word.word);
if (lettersSelected === word.word.length) {
alert("You find the word: " + word.word);
this.setState({words: this.state.words.map(w => (w.word === word.word ? { word, found: true} : w))});
}
}
};
selectLetter = (item) => {
let game = this.state.game;
game.board[item.row][item.column].setIsSelected(!item.isSelected);
this.setState({
game: game
});
this.verifyFindWord(item.word);
};
wordsText = () => {};
render() {
const { rows, columns, board, words } = this.state.game;
return (
<div>
<div className="easy-container">
<h1>Hunting-Words</h1>
<Board board={board} selectLetter={this.selectLetter.bind(this)} />
{["top"].map((placement) => (
<OverlayTrigger
trigger="click"
key={placement}
placement={placement}
overlay={
<Popover id={`popover-positioned-${placement}`}>
<Popover.Title as="h3">{`WORDS:`}</Popover.Title>
<Popover.Content>
<div className="words">
{words.map((word, index) => (
<span
key={word.word + index}
className={word.found ? "finded" : ""}
>
{word.word}
<br />
</span>
))}
</div>
</Popover.Content>
</Popover>
}
>
<Button variant="secondary">TIP</Button>
</OverlayTrigger>
))}
</div>
</div>
);
}
}