Question

使用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>)
                })}

我的状态：

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

更改按钮图标点击反应

2 个答案: