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

希望它会对您有所帮助。

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

1 个答案: