单击反应更改按钮图标

Question

使用 react，我有一个带有图标的按钮，一个字体很棒的按钮。我想在点击图标之间切换：图标是带有标题和布尔值的眼睛。如果布尔值是真的，眼睛应该是睁开的。如果单击相同的按钮，则布尔值变为 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>)
                })}

我的状态：

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

Answer 2

你的pickEye 不需要是一个监听函数，因为对于onClick={() => props.pickEye(index)}，() => 这已经是一个内联监听函数。 pickEye 是你的类函数。所以这将是onClick={() => this.state.pickEye(index)}/> 而不是onClick={() => props.pickEye(index)}/>

所以，改变：

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

到

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