React 구성 요소의 부울 상태를 전환하려면 어떻게 해야 합니까?

React 구성 요소의 부울 상태를 전환하려면 어떻게 해야 합니까?

React 컴포넌트의 부울 상태를 전환하는 방법을 알고 싶습니다.예:

구성 요소의 생성자에 부울 상태 점검이 있습니다.

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>

물론 Uncaughed ReferenceError: 체크는 정의되어 있지 않습니다.그럼 어떻게 하면 좋을까요?

아무도 안 올렸기 때문에 정답을 올립니다.새 상태 업데이트가 이전 상태에 따라 달라지는 경우 항상 다음 형식의 기능을 사용하십시오.setState새로운 상태를 반환하는 함수를 인수로 받아들입니다.

고객님의 경우:

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

문서 참조

---

이 답변이 보급되고 있기 때문에 리액트 훅(v16.8+)에 사용해야 할 접근방식을 추가합니다.

후크를 사용하는 경우 다음 코드를 사용합니다(새로운 상태가 이전 상태에 따라 달라지는 경우).

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

를 사용해 주세요.this.state.check대신check.value여기:

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

하지만 어쨌든 이런 식으로 하는 것은 나쁜 관행이다.다른 방법으로 콜백을 마크업으로 직접 작성하지 않는 것이 훨씬 좋습니다.

업데이트: 댓글에서 지적했듯이 React의 상태는 비동기이기 때문에 이 접근 방식은 예기치 않은 결과를 초래할 수 있습니다.이 경우 올바른 방법은 콜백을 사용하는 것입니다.

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

다음은 후크를 사용하는 예입니다(예: 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>

사용하다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>

시험:

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

사용.check: !check.value즉, RSA는check선언하지 않은 객체입니다.

반대되는 값을 지정할 필요가 있습니다.this.state.check.

또한 React 후크를 사용하여 함수 구성 요소의 로컬 상태를 선언할 수도 있습니다.변수의 초기 상태toggled메서드에 대한 인수로 전달되었습니다..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

부울 값을 전환할 때 이것이 가장 간단하다는 것을 알았습니다.즉, 값이 이미 true이면 false로 설정되고 그 반대도 마찬가지입니다.정의되지 않은 오류에 주의하십시오. 실행하기 전에 속성이 정의되었는지 확인하십시오.

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

컨텍스트에 따라 mouseEnter 함수가 지정된 상태를 업데이트할 수 있습니다.어느 쪽이든 상태 값을 true:false로 설정하면 지정된 함수의 상태 값을 다음과 같이 반대 값으로 설정하여 업데이트할 수 있습니다.!this.state.variable

state = {
  hover: false
}

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

React 컴포넌트에서 Redx를 사용하여 토글 상태를 사용하려고 검색했을 때 이 페이지에 표시되었지만, 이 페이지에서 동일한 방법을 찾을 수 없습니다.

따라서 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" />

[ Toggle ]팝업 기능은 Dispatcher를 호출하는 다음과 같습니다.

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

이 콜은 아래 mapDispatchToProps 함수로 이동합니다.이 함수는 전환된 상태를 반영합니다.

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

감사해요.

정::const [state, setState] = useState(1);

★★★★★★setState(state*-1);

: ★★★★state > 0 ? 'on' : 'off';

오래된 질문인 것은 알지만, 이것은 매우 일반적인 사용 사례입니다.

단순히 후크를 사용하여 부울 상태를 전환하는 경우:

setIsToggled(state => !state)

현재 상태를 받아들이는 콜백을 제공하기만 하면 됩니다.

   
const { Component, useState } = React;
    function App(){
        return (
            <div>
                <ToggleClassComp />
                <ToggleFuncComp />
            </div>
    )
}

// WITH REACT CLASS COMPONENT
// import React, { Component } from 'react';

class ToggleClassComp extends Component {
    constructor(props, context){
    super(props, context);
    this.state = {
        check : false
    }
}
  
render(){
    return (
        <div>
        <p>{this.state.check ? 'Welcome User' : 'Welcome Visitor'}</p>
        <button 
        onClick={() => this.setState({check: !this.state.check}) }>
        {this.state.check ? 'Logout' : 'Login'}</button>
        </div>
    )
}
}

// WITH FUNCTION COMPONENT
// import React, { useState } from 'react';
function ToggleFuncComp(){
    const [ check , setCheck ] = useState(false)
    return(
        <div>
            <p>{check ? 'Welcome User' : 'Welcome Visitor'}</p>
            <button onClick={()=> setCheck(!check )}>
            {check ? 'Logout' : 'Login'}</button> 
        </div>
    )
}

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>

언급URL : https://stackoverflow.com/questions/40359800/how-to-toggle-boolean-state-of-a-react-component