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

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

---

通过查看您的问题，我认为您试图在尝试单击游戏控制按钮使背景变为白色时取消选择状态值

我希望我理解正确

要从状态取消选择，我们需要唯一地标识值，但在当前情况下，值可以复制，因此如果值可以复制，我们需要引入键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>

---

希望对您有所帮助。

这能回答您的问题吗？另外，就像您使用

game[option]=！游戏[选项]

。另外：

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