Javascript 基于映射函数的多项选择题

我想做一个选择题，如果用户点击答案，它会改变颜色，但问题是当我改变颜色时，所有项目都会改变颜色

这是我的密码

const question = [
    {
        question: "lorem ipsum",
        choice: ["a", "b", "c", "d"]
    },
    {
        question: "lorem ipsum",
        choice: ["a", "b", "c", "d"]
    },
    {
        question: "lorem ipsum",
        choice: ["a", "b", "c", "d"]
    },
]

const App = () => {
    const [eachQuestion, setEachQuestion] = useState(question[0])
    const [checked, setChecked] = useState(false)

    const handleChecked = () => {
        setChecked(true)
    }
    
    return (
        <h1>{eachQuestion.question}</h1>
        {eachQuestion.choice.map((val) => {
            return (
                <div onClick={handleChecked} style={{background: checked ? 'red' : 'blue' }}>
                    <p>{val}</p>
                </div>
            );
        })}
    )
}

const问题=[
{
问题：“lorem ipsum”，
选项：[“a”、“b”、“c”、“d”]
},
{
问题：“lorem ipsum”，
选项：[“a”、“b”、“c”、“d”]
},
{
问题：“lorem ipsum”，
选项：[“a”、“b”、“c”、“d”]
},
]
常量应用=（）=>{
const[eachQuestion，setEachQuestion]=useState（问题[0]）
const[checked，setChecked]=useState（false）
常量handleChecked=（）=>{
setChecked（真）
}
返回(
{每个问题。问题}
{eachQuestion.choice.map（（val）=>{
返回(
{val}

);
})}
)
}

如何仅更改所选项目的颜色？

试试这种方法

const App = () => {
    const [eachQuestion, setEachQuestion] = useState(question[0])
    const [selected, setSelected] = useState(-1)

    const handleChecked = (index) => {
        setSelected(index)
    }
    
    return (
        <h1>{eachQuestion.question}</h1>
        {eachQuestion.choice.map((val, index) => {
            return (
                <div onClick={() => handleChecked(index)} style={{background: index === selected ? 'red' : 'blue' }}>
                    <p>{val}</p>
                </div>
            );
        })}
    )
}

const-App=（）=>{
const[eachQuestion，setEachQuestion]=useState（问题[0]）
const[selected，setSelected]=useState（-1）
常量handleChecked=（索引）=>{
已选数据集（索引）
}
返回(
{每个问题。问题}
{eachQuestion.choice.map（（val，index）=>{
返回(
handleChecked（index）}style={{background:index==selected？'red'：'blue'}>
{val}

);
})}
)
}

试试这种方法

const App = () => {
    const [eachQuestion, setEachQuestion] = useState(question[0])
    const [selected, setSelected] = useState(-1)

    const handleChecked = (index) => {
        setSelected(index)
    }
    
    return (
        <h1>{eachQuestion.question}</h1>
        {eachQuestion.choice.map((val, index) => {
            return (
                <div onClick={() => handleChecked(index)} style={{background: index === selected ? 'red' : 'blue' }}>
                    <p>{val}</p>
                </div>
            );
        })}
    )
}

const-App=（）=>{
const[eachQuestion，setEachQuestion]=useState（问题[0]）
const[selected，setSelected]=useState（-1）
常量handleChecked=（索引）=>{
已选数据集（索引）
}
返回(
{每个问题。问题}
{eachQuestion.choice.map（（val，index）=>{
返回(
handleChecked（index）}style={{background:index==selected？'red'：'blue'}>
{val}

);
})}
)
}

假设在给定时间只能选择一个选项，您可以将该选项存储为选中状态。像这样：

const [checked, setChecked] = useState()

const handleChecked = (choice) => {
        setChecked(choice)
    }
    
    return (
        <h1>{eachQuestion.question}</h1>
        {eachQuestion.choice.map((val) => {
            return (
                <div onClick={handleChecked} style={{background: checked === val ? 'red' : 'blue' }}>
                    <p>{val}</p>
                </div>
            );
        })}
    )

const[checked，setChecked]=useState（）
常量handleChecked=（选项）=>{
setChecked（选项）
}
返回(
{每个问题。问题}
{eachQuestion.choice.map（（val）=>{
返回(
{val}

);
})}
)

假设在给定时间只能选择一个选项，您可以将该选项存储为选中状态。像这样：

const [checked, setChecked] = useState()

const handleChecked = (choice) => {
        setChecked(choice)
    }
    
    return (
        <h1>{eachQuestion.question}</h1>
        {eachQuestion.choice.map((val) => {
            return (
                <div onClick={handleChecked} style={{background: checked === val ? 'red' : 'blue' }}>
                    <p>{val}</p>
                </div>
            );
        })}
    )

const[checked，setChecked]=useState（）
常量handleChecked=（选项）=>{
setChecked（选项）
}
返回(
{每个问题。问题}
{eachQuestion.choice.map（（val）=>{
返回(
{val}

);
})}
)

可能您想存储选择的值（即“a”、“b”、“c”、“d”）而不是布尔值，然后在迭代时，当

valueselected==val

可能您想存储选择的值（即“a”、“b”、“c”、“d”）而不是布尔值时，将检查该选择，然后在迭代时，当

valueselected==val