如何在 React 中动态更改状态?

Question

我想做的是我想拥有取消选中的功能。例如：当我选择一个奇数时，只读输入的背景变成黄色，当我再次单击时，它变成白色，但它不会取消选择该奇数的比例。当背景变为黄色时，e.target.value 被添加到所选状态，当它再次变为白色时，我找不到从状态中删除目标值的方法。我想为了更好地理解，您可能需要检查 github(https://github.com/Elvaleryn/choosebet( 中的代码。这是一张图片：img1。注意：我很清楚.splice((方法。

//state for selecting how much money user will put
const [betMoney, setBetMoney] = useState(3)
//state for the odd value
const [chosen, setChosen] = useState([1])
//basically a data base for games
const [games, setGames] = useState([])
//getting data from server
useEffect(() => {
gameService
.fetchGames()
.then(response => {
setGames(response.data)
})
}, [])
//to pick the chosen odd
const handleOptionChange = (game, option) => {
game[option] = !game[option]
setGames([...games])
}
const handleMoneyChange = (event) => {
setBetMoney(event.target.value)
}
//when odd is chosen it activates the handle option change to apply background color
const chooseOdd = (e, person, option) => {
//when odd is chosen it activates the handle option change to apply background color
handleOptionChange(person, option)
const index = e.target.value
setChosen(chosen.concat(index))
}
const ratioTotal = chosen.reduce((a, b) => a * b)
const result = parseFloat(ratioTotal * betMoney).toFixed(2)

Answer 1

通过看到您的问题，我认为您在尝试单击游戏控件以使背景变白时都试图从状态中取消选择值。

我希望我理解正确。

要从状态中取消选择，我们需要唯一标识值，但在当前情况下，值可以重复，因此我们需要引入 key-id，如果值可以复制，并且在 concat 之前我们需要确定唯一值是否已经存在，然后取消选择，如果不是，则添加。

{games.map(p =>
<div>
<p style={{ fontWeight: '600' }, {fontSize: '1.5em'}} key={p.id}>{p.game}</p>
<div>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<Button style={buttonBackground} **g-id='1'** value={p.homeWin} onClick={(e) => chooseOdd(e, p, 'is1Selected')}>{p.homeWin}</Button>
</InputGroup.Prepend>
<FormControl id="one" style={{ backgroundColor: p.is1Selected ? 'Yellow' : 'White' }} value={p.homeWin} aria-describedby="basic-addon1" readOnly />
<InputGroup.Prepend>
<Button style={buttonBackground} **g-id='2'** value={p.draw} onClick={(e) => chooseOdd(e, p, 'is2Selected')}>{p.draw}</Button>
</InputGroup.Prepend>
<FormControl id="two" style={{ backgroundColor: p.is2Selected ? 'Yellow' : 'White' }} value={p.draw} aria-describedby="basic-addon1" readOnly />
<InputGroup.Prepend>
<Button style={buttonBackground} **g-id='3'** value={p.awayWin} onClick={(e) => chooseOdd(e, p, 'is3Selected')}>{p.awayWin}</Button>
</InputGroup.Prepend>
<FormControl id="three" style={{ backgroundColor: p.is3Selected ? 'Yellow' : 'White' }} value={p.awayWin} aria-describedby="basic-addon1" readOnly />
</InputGroup>
</div>
</div>

(}

在键的帮助下，我们可以识别我们需要选择/取消选择的值

//when odd is chosen it activates the handle option change to apply background color
const chooseOdd = (e, person, option) => {
//when odd is chosen it activates the handle option change to apply background color
handleOptionChange(person, option)
const index = e.target.value
const key = e.target.getAttribute("g-id");
const data = key.concat('(key)-').concat(index);
const i = chosen.indexOf(data);
if (i !== -1) {
const d = chosen.filter(d => d != data);
alert(d);
setChosen(d)
}
else {
alert(chosen.concat(data));
setChosen(chosen.concat(data))
}
}

希望对您有所帮助。