Làm thế nào để chuyển đổi trạng thái boolean của thành phần phản ứng?

Tôi muốn biết cách chuyển đổi trạng thái boolean của một thành phần phản ứng. Ví dụ:

Tôi đã kiểm tra trạng thái boolean trong hàm tạo của thành phần của mình:

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

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

Tôi đang cố gắng chuyển đổi trạng thái mỗi khi hộp kiểm của tôi được nhấp, sử dụng phương thức this.setState:

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

Tất nhiên tôi nhận được Lỗi Tham chiếu Không có: Kiểm tra không được xác định . Vậy làm thế nào tôi có thể đạt được điều này?

Rất cám ơn trước.

Vì không ai đăng bài này, tôi đăng câu trả lời chính xác. Nếu cập nhật trạng thái mới của bạn phụ thuộc vào trạng thái trước đó, hãy luôn sử dụng dạng hàm setStatemà trong đó nó chấp nhận làm đối số, một hàm trả về trạng thái mới.

Trong trường hợp của bạn:

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

Xem tài liệu

Vì câu trả lời này đang trở nên phổ biến, nên thêm phương pháp sẽ được sử dụng cho React Hooks (v16.8 +):

Nếu bạn đang sử dụng useStatehook, hãy sử dụng mã sau (trong trường hợp trạng thái mới của bạn phụ thuộc vào trạng thái trước đó):

const [check, setCheck] = useState(false);
// ...
setCheck(prevCheck => prevCheck + 1);

Bạn nên sử dụng this.state.checkthay vì check.valueở đây:

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

Nhưng dù sao thì việc làm theo cách này là không tốt . Tốt hơn nhiều nên chuyển nó sang phương thức riêng biệt và không viết lệnh gọi lại trực tiếp trong đánh dấu.

Sử dụng checkedđể nhận giá trị. Trong onChange, checkedsẽ được truevà nó sẽ là một loại boolean.

Hi vọng điêu nay co ich!

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>

Đây là một ví dụ sử dụng hook (yêu cầu React> = 16.8.0)

// import React, { useState } from 'react';
const { useState } = React;

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"><div>

Bạn cũng có thể sử dụng useStatehook của React để khai báo trạng thái cục bộ cho một thành phần hàm. Trạng thái ban đầu của biến toggledđã được chuyển làm đối số cho phương thức .useState.

import { render } from 'react-dom';
import React from "react";

type Props = {
  text: string,
  onClick(event: React.MouseEvent<HTMLButtonElement>): void,
};

export function HelloWorldButton(props: Props) {
  const [toggled, setToggled] = React.useState(false); // returns a stateful value, and a function to update it
  return <button
  onClick={(event) => {
    setToggled(!toggled);
    props.onClick(event);
  }}
  >{props.text} (toggled: {toggled.toString()})</button>;
}


render(<HelloWorldButton text='Hello World' onClick={() => console.log('clicked!')} />, document.getElementById('root'));

https://stackblitz.com/edit/react-ts-qga3vc

Thử:

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

Sử dụng check: !check.valuecó nghĩa là nó đang tìm kiếm checkđối tượng mà bạn chưa khai báo.

Bạn cần xác định rằng bạn muốn giá trị đối lập của this.state.check.

Tôi thấy điều này đơn giản nhất khi chuyển đổi các giá trị boolean. Nói một cách đơn giản nếu giá trị đã là true thì nó sẽ đặt nó thành false và ngược lại. Cẩn thận với các lỗi không xác định, đảm bảo thuộc tính của bạn đã được xác định trước khi thực thi

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

Tùy thuộc vào ngữ cảnh của bạn; điều này sẽ cho phép bạn cập nhật trạng thái cho hàm mouseEnter. Dù bằng cách nào, bằng cách đặt giá trị trạng thái thành true: false, bạn có thể cập nhật giá trị trạng thái đó cho bất kỳ hàm nào bằng cách đặt nó thành giá trị đối lập với!this.state.variable

state = {
  hover: false
}

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

Tôi đã được đưa vào trang này khi tôi đang tìm kiếm để sử dụng trạng thái chuyển đổi trong thành phần React bằng Redux nhưng tôi không tìm thấy ở đây bất kỳ cách tiếp cận nào bằng cách sử dụng tương tự.

Vì vậy, tôi nghĩ nó có thể giúp ích cho những người đang gặp khó khăn trong việc triển khai trạng thái chuyển đổi bằng cách sử dụng Redux.

Tệp giảm tốc của tôi ở đây. Tôi nhận được trạng thái ban đầu là sai theo mặc định.

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

Tôi thay đổi trạng thái khi nhấp vào hình ảnh. Vì vậy, thẻ img của tôi ở đây với chức năng onClick.

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

Hàm Toggle Popup của tôi ở bên dưới, gọi là Dispatcher.

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

Lệnh gọi này đi đến hàm mapDispatchToProps bên dưới, nó phản ánh lại trạng thái được bật.

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

Cảm ơn bạn.