Функция onClick в реакции на кнопку может быть запущена только один раз

У меня есть функция onClick, которая изменяет состояние className, чтобы показать и скрыть некоторые стили, которые у меня есть. Кнопка работает нормально при первом нажатии, но после этого не может быть нажата повторно.

Как показано ниже, у меня есть компонент, который подключается к моему хранилищу redux. Я создал функцию handleClick, чтобы вызвать actionCreator, который я показываю в своих действиях. Я хочу, чтобы функция onClick срабатывала при каждом щелчке и меняла щелчок, находящийся в моем состоянии, на противоположный тому, что было раньше. Мне где-то не хватает предыдущего состояния? Я напрямую меняю свое состояние, когда мне нужно его копировать? В любом случае, надеюсь, вопрос имеет смысл.

Изменить: я обнаружил, что, когда я нажимаю кнопку, состояние щелчка остается верным, не знаю, почему оно не переключается.

class BackDrop extends React.Component {

    handleClick = () => {
        this.props.projectClick();
    };
    render() {
        console.log(this.props);
    return (
        <div className={this.props.click ? 'backdrop-click' : 'backdrop'}>
            <button className="btn-click" onClick={()=> {this.handleClick()}}>
                {this.props.click ? 'Back' : 'View Projects'}
            </button>
            <ProjectDisplay
                click={this.props.click}
            />
        </div>
        )
    }
}
const mapStatetoProps = (state) => {
    return state;
};


export default connect(mapStatetoProps, actionCreators)(BackDrop);
//Reducer

const initialState = {
    click: false,
};

const mainReducer = (state = initialState, action) => {
    switch(action.type) {
        case "PROJECT_CLICK":
            return {
                ...state,
                click: !action.click,
            };
        default:
            return {
                ...state,
            }
    }
};

export default mainReducer;

//Action

export function projectClick(click) {
    return {
        type: "PROJECT_CLICK",
        click,
    }
}


reactjs redux reducers onclick react-lifecycle
person Nate Watts    schedule 23.11.2017    source источник
comment
Вы не показываете объявление actionCreators в ваших фрагментах. Однако, когда вы вызываете this.props.projectClick();, вы не передаете там аргумент - может ли это быть вашей проблемой? С другой стороны, если это всегда переключатель, вы также можете использовать click: !state.click в своем редукторе. Удачной отладки. ;-)   -  person sthzg    schedule 24.11.2017
comment
Вот в чем проблема. Фу. Я использовал реквизит, а не состояние.   -  person Nate Watts    schedule 24.11.2017

Ответы (1)


arrow_upward
0
arrow_downward

Оказывается, я использовал click: !action.click, хотя должен был сделать click: !state.click

person Nate Watts    schedule 23.11.2017