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

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

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

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

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

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

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

Конечно, я получаю сообщение об ошибке "Нет данных": проверка не определена. Итак, как я могу это достичь?

Спасибо заранее.

Ответ 1

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

В твоем случае:

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

См. Документы

Ответ 2

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

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

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

Ответ 3

Используйте 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>

Ответ 4

Пытаться:

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

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

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

Ответ 5

В зависимости от вашего контекста; это позволит вам обновить состояние с помощью функции mouseEnter. В любом случае, установив значение состояния на true: false, вы можете обновить это значение состояния для любой функции, установив для него противоположное значение с помощью !this.state.variable

state = {
  hover: false
}

onMouseEnter = () => {
  this.setState({
    hover: !this.state.hover
  });
};

Ответ 6

Я был приземлился на этой странице, когда я пытаюсь использовать режим переключения в компоненте 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 })
});

Спасибо.

Ответ 7

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

this.setState({
   propertyName: this.propertyName = !this.propertyName
});