如何在 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>

)}

在 key 的帮助下，我们可以确定需要选择/取消选择的值

//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))
    }
}

希望对你有所帮助。