javascript - 单击 react 更改按钮图标

Question

使用 React，我有一个带有图标的按钮，字体非常棒。我想在点击图标之间切换:图标是一个带有标题和 bool 值的眼睛。如果 bool 值为真，则眼睛应该是睁开的。如果单击同一个按钮，则 bool 值变为 false，按钮的图标应变为关闭。我的按钮已经有一个验证，所以如果 bool 值是真或假，它会改变图标，我的问题是改变 bool 值 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>)
                })}

我的状态:

state = {

            eyes:
                [
                    {
                        toggled: 'false',
                        tituloEye: 'porta'
                    },
                    {
                        toggled: 'true',
                        tituloEye: 'prateleira'
                    },
                ],

            eyeSelecionado: '',
}

我得到的点击按钮如下:

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

Answer 1

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

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