Как переключить логическое состояние компонента react?

Я хотел бы знать, как переключать логическое состояние компонента react. Например:

у меня есть логическая проверка состояния в конструкторе моего компонента:

constructor(props, context) { 
   super(props, context);

   this.state = {
      check: false
   };
};

Я пытаюсь переключать состояние каждый раз, когда мой флажок нажат, используя это.способ выполнении функция setState: 

<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label>

конечно, я получаю Uncaught ReferenceError: проверка не определена. Так как же я могу достичь этого?

заранее большое спасибо.

14
javascript reactjs reactjs-flux

5 ответов

поскольку никто не опубликовал это, я публикую правильный ответ. Если обновление нового состояния зависит от предыдущего состояния, всегда используйте функциональную форму setState который принимает в качестве аргумента функцию, возвращающую новое состояние.

в вашем случае:

this.setState(prevState => ({
  check: !prevState.check
}));

посмотреть docs

69

вы должны использовать this.state.check вместо check.value здесь:

this.setState({check: !this.state.check})

но в любом случае это плохая практика сделать это таким образом. Гораздо лучше переместить его в отдельный метод и не писать обратные вызовы непосредственно в разметке.

8

использовать checked чтобы получить значение. Во время onChange, checked будет true и это будет типа boolean.

надеюсь, что это помогает!

class A extends React.Component {
  constructor() {
    super()
    this.handleCheckBox = this.handleCheckBox.bind(this)
    this.state = {
      checked: false
    }
  }
  
  handleCheckBox(e) {
    this.setState({
      checked: e.target.checked
    })
  }
  
  render(){
    return <input type="checkbox" onChange={this.handleCheckBox} checked={this.state.checked} />
  }
}

ReactDOM.render(<A/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
3

попробуй:

<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !this.state.check.value})}/> Checkbox </label>

используя check: !check.value означает, что он ищет check объект, который вы не объявляли.

вы должны указать, что вы хотите противоположное значение this.state.check.

2

Я приземлился на этой странице, когда я ищу, чтобы использовать состояние переключения в компоненте React с помощью Redux, но я не нахожу здесь никакого подхода, используя то же самое.

Итак, я думаю, что это может помочь кому-то, кто изо всех сил пытался реализовать состояние переключения с помощью Redux.

мой файл редуктора идет здесь. Я получаю начальное состояние false по умолчанию.

const INITIAL_STATE = { popup: false };
export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case "POPUP":
            return {
                ...state,
                popup: action.value
            };
        default:
            return state;
    }
    return state;
};

Я изменяю состояние при нажатии на изображение. Итак, мой тег img идет сюда с onClick функция.

<img onClick={togglePopup} src={props.currentUser.image} className="avatar-image avatar-image--icon" />

моя всплывающая функция переключения идет ниже, которая вызывает диспетчера.

const togglePopup = ev => {
    ev.preventDefault();
    props.handlePopup(!props.popup);
};

этот вызов идет ниже функции mapDispatchToProps, которая отражает обратно переключенное состояние.

const mapDispatchToProps = dispatch => ({
    handlePopup: value => dispatch({ type: "POPUP", value })
});

спасибо.

0