Javascript 单击“反应”更改按钮图标

使用react，我有一个带有图标的按钮，一个字体或其他字体。我想在点击图标之间切换：图标是带有标题和布尔值的眼睛。如果布尔值为true，则眼睛应该睁开。如果单击同一按钮，布尔值将变为false，按钮图标应变为关闭。 我的按钮已经有了验证，所以如果布尔值为真或假，它将更改图标。我的问题是更改布尔值onClick。用setState进行了尝试，但无法做到这一点

我的按钮：

   {props.eyes.map(eye => {
                    return (<div className={"column is-2"}>
                        <button
                            className={eye.toggled === 'true' ? "button is-white fa fa-eye" : "button is-white fa fa-eye-slash"}
                            onClick={() => props.pickEye(eye)}/>
                        {eye.tituloEye}
                    </div>)
                })}

我得到的点击按钮如下：

pickEye = (eye) => {
    this.setState({eyeSelecionado: eye});
};

---

您需要在父状态中设置切换值，如

    {props.eyes.map((eye, index) => {
        return (<div className={"column is-2"}>
            <button
                className={eye.toggled === true 
                    ? "button is-white fa fa-ye" 
                    : "button is-white fa fa-eye-slash"
                }
                onClick={() => props.pickEye(index)}
            />
                {eye.tituloEye}
            </div>
        )
    }
)}

pickEye = (index) => {
    this.setState(prevState => ({
        var newState = {
            [index]: {
                ...prevState.eyes[index], 
                toggled: !prevState.eyes[index].toggled
            }
        };
        eyes: Object.assign([], prevState.eyes, newState)}));
};

{props.eyes.map（（eye，index）=>{
返回(
道具。扒手（索引）}
/>
{eye.tituloEye}
)
}
)}
扒手=（索引）=>{
this.setState（prevState=>({
var newState={
[索引]:{
…prevState.eyes[索引]，
切换：！prevState.eyes[index]。切换
}
};
眼睛：Object.assign（[]，prevState.eyes，newState）}）；
};
您的
pickEye
不需要是一个监听函数，因为对于
onClick={（）=>props.pickEye（index）}
，
（）=>
这已经是一个内联监听函数了。而
pickEye
是您的类函数。所以这将是
onClick={（）=>this.state.pickEye（index）}/>
而不是
onClick={（）=>props.pickEye（index）}/>

因此，改变：

pickEye = (eye) => {
    this.setState({eyeSelecionado: eye});
}

到

然后按下按钮：

<button className={eye.toggled === 'true' ? "button is-white fa fa-eye" : "button is-white fa fa-eye-slash"}
    onClick={() => this.state.pickEye(index)}/>

this.state.pickEye（索引）}/>
您正在切换状态，但渲染代码中根本没有使用该状态。由于没有变化，它将呈现相同的效果。从true到false时，它会工作，但从false到false则不会。这就是我到目前为止所做的，我不知道为什么我在dom上没有呈现。
https://codesandbox.io/s/5zvpnn92k4
您的数据应该
切换为：false，
而不是
切换为：“false”，
同样，您应该像
{eye.toggled===true？
不用担心，很高兴它能帮上忙。我的button是另一个组件，然后是我的状态，这就是我使用道具的原因。所以你需要在你的子组件
道具中传递你的
pickEye
。使用
这个。道具可以做到这一点。在你的父组件中：
和你的子组件中：
构造函数（）{this.state={eye:this.props.eye}}组件将接收props（newProps）{this.setState（{eye:newProps.eye}}
我希望尽可能避免在多个组件中出现状态，但您的
眼睛
状态需要在您的家长中。当您的家长
眼睛
状态更改时，这将在所有具有
组件的childs组件中执行更新
眼睛
道具值。要尊重React生命周期，请参阅：
pickEye(eye) {
    this.setState({eyeSelecionado: eye});
}

<button className={eye.toggled === 'true' ? "button is-white fa fa-eye" : "button is-white fa fa-eye-slash"}
    onClick={() => this.state.pickEye(index)}/>