Check in ReactJS 체크박스를 디폴트로 설정하는 방법

Check in ReactJS 체크박스를 디폴트로 설정하는 방법

된 후할 수 checked="checked"응합니니다다

var rCheck = React.createElement('input',
    {
        type: 'checkbox',
        checked: 'checked',
        value: true
    }, 'Check here');

「」를 checked="checked"체크박스를 끄거나 켜면 체크박스의 상태를 조작할 수 없습니다.

상자와 상호 작용하려면 확인란을 변경한 후 해당 확인란의 상태를 업데이트해야 합니다.하려면 , 「」를 합니다.defaultChecked.

예:

<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />

여기에는 몇 가지 방법이 있습니다.다음은 예를 제시하겠습니다.

상태 후크를 사용하여 작성:

function Checkbox() {
  const [checked, setChecked] = React.useState(true);

  return (
    <label>
      <input type="checkbox"
        defaultChecked={checked}
        onChange={() => setChecked(!checked)}
      />
      Check Me!
    </label>
  );
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

JSBin에 대한 라이브 데모입니다.

컴포넌트를 사용하여 작성:

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: true,
    };
  }
  toggleChange = () => {
    this.setState({
      isChecked: !this.state.isChecked,
    });
  }
  render() {
    return (
      <label>
        <input type="checkbox"
          defaultChecked={this.state.isChecked}
          onChange={this.toggleChange}
        />
        Check Me!
      </label>
    );
  }
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

JSBin에 대한 라이브 데모입니다.

박스가 「CHANGE」으로 작성되어 있는 경우.React.createElement 후 속성 「」을 클릭합니다.defaultChecked용됩니니다다

React.createElement('input',{type: 'checkbox', defaultChecked: false});

@nash_ag 크레딧

리액트 렌더링 라이프 사이클에서는 폼 요소의 값 속성이 DOM의 값을 덮어씁니다.제어되지 않는 구성 요소의 경우 React에서 초기 값을 지정하지만 후속 업데이트는 제어되지 않은 상태로 두도록 하는 경우가 많습니다.이 경우 값 대신 defaultValue 또는 defaultChecked 속성을 지정할 수 있습니다.

        <input
          type="checkbox"
          defaultChecked={true}
        />

또는

React.createElement('input',{type: 'checkbox', defaultChecked: true});

은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★defaultChecked아래 체크박스의 경우:https://reactjs.org/docs/uncontrolled-components.html#default-values

정답 외에 다음 작업을 수행할 수 있습니다.p

<input name="remember" type="checkbox" defaultChecked/>

import React, { useState } from 'react'


const [rememberUser, setRememberUser] = useState(true) //use false for unchecked initially


<input
   type="checkbox"
   checked={rememberUser}
   onChange={() => {
      setRememberUser(!rememberUser)
   }}
/>

이냐 거짓이냐가 .defaultChecked={true}

<input type="checkbox"
        defaultChecked={true}
        onChange={() => setChecked(!checked)}
      />

되고 있다

<input type="checkbox" value={props.key} defaultChecked={props.checked} ref={props.key} onChange={this.checkboxHandler} />

그리고 함수가 그것을 초기화한다.

{this.viewCheckbox({ key: 'yourKey', text: 'yourText', checked: this.state.yourKey })}

선택한 입력 확인란에 "true" 또는 ""를 전달할 수 있습니다.빈 따옴표("")는 false로 인식되며 항목이 선택 해제됩니다.

let checked = variable === value ? "true" : "";
<input
     className="form-check-input"
    type="checkbox"
    value={variable}
    id={variable}
    name={variable}
    checked={checked}
/>
<label className="form-check-label">{variable}</label>

Class 컴포넌트를 사용하여 이 작업을 수행하려고 했습니다. 동일한 메시지를 볼 수 있습니다.

.....

class Checkbox extends React.Component{
constructor(props){
    super(props)
    this.state={
        checked:true
    }
    this.handleCheck=this.handleCheck.bind(this)
}

handleCheck(){
    this.setState({
        checked:!this.state.checked
    })
}

render(){
    var msg=" "
    if(this.state.checked){
        msg="checked!"
    }else{
        msg="not checked!"
    }
    return(
        <div>
            <input type="checkbox" 
            onChange={this.handleCheck}
            defaultChecked={this.state.checked}
            />
            <p>this box is {msg}</p>
        </div>
    )
}

}

여기 제가 얼마 전에 했던 코드가 있어요, 유용할 수도 있어요.이 행 = > this.state = { checked: false, checked2: true}로 플레이해야 합니다.

class Componente extends React.Component {
  constructor(props) {
    super(props);

    this.state = { checked: false, checked2: true};
    this.handleChange = this.handleChange.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);

  }  

  handleChange() {
    this.setState({
        checked: !this.state.checked      
    })
  }

  handleChange2() {
    this.setState({
        checked2: !this.state.checked2      
    })
  }

  render() {
    const togglecheck1 = this.state.checked ? 'hidden-check1' : '';
    const togglecheck2 = this.state.checked2 ? 'hidden-check2' : '';

    return <div>
        <div>
        <label>Check 1</label>
        <input type="checkbox" id="chk1"className="chk11" checked={ this.state.checked } onChange={ this.handleChange } />
        <label>Check 2</label>
        <input type="checkbox" id="chk2" className="chk22" checked={ this.state.checked2 } onChange={ this.handleChange2 } />
      </div>

      <div className={ togglecheck1 }>show hide div with check 1</div>
      <div className={ togglecheck2 }>show hide div with check 2</div>

    </div>;
  }
}

ReactDOM.render(
  <Componente />,
  document.getElementById('container')
);

CSS

.hidden-check1 {
  display: none;  
  }

.hidden-check2 {
  visibility: hidden;
}

HTML

  <div id="container">
      <!-- This element's contents will be replaced with your component. -->
  </div>

코드명 => http://codepen.io/parlop/pen/EKmaWM

제 경우 "default Checked"가 상태/조건과 함께 제대로 작동하지 않는다고 느꼈습니다.그래서 상태를 전환하기 위해 "체크"와 "onChange"를 함께 사용했습니다.

예.

checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}

행이 여러 개인 동적 데이터를 처리하려는 경우 동적 데이터를 처리하기 위한 것입니다.

rowId가 0인지 확인할 수 있습니다.

0과 같으면 부울값의 상태를 true로 설정할 수 있습니다.

interface MyCellRendererState {
    value: boolean;
}
constructor(props) {
        super(props);
        this.state = {
            value: props.value ? props.value : false
        };
        this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
    }
handleCheckboxChange() {
        this.setState({ value: !this.state.value });
    };
render() {
        const { value } = this.state;
        const rowId = this.props.rowIndex
        if (rowId === 0) {
           this.state = {
             value : true }
        }
        return ( 
          <div onChange={this.handleCheckboxChange}>
            <input 
            type="radio" 
            checked={this.state.value}
            name="print"
            /> 
          </div>
         )
      }

너무 힘들게 하지 마세요.먼저 아래에 제시된 간단한 예를 이해하십시오.당신에게는 분명할 것입니다.이 경우 체크박스를 누른 직후에 상태(처음에는 false)에서 값을 가져와 다른 값(처음에는 true)으로 변경하고 그에 따라 상태를 설정합니다.이 체크박스를 두 번째로 누르면 동일한 프로세스가 다시 수행됩니다.값을 잡고(이제 True), 변경(False)한 다음 상태를 적절하게 설정합니다(이제 다시 False).코드는 다음과 같습니다.

파트 1

state = {
  verified: false
} // The verified state is now false

파트 2

verifiedChange = e => {
  // e.preventDefault(); It's not needed
  const { verified } = e.target;
  this.setState({
    verified: !this.state.verified // It will make the default state value(false) at Part 1 to true 
  });
}; 

파트 3

  <form> 
      <input
          type="checkbox"
          name="verified"
          id="verified"
          onChange={this.verifiedChange} // Triggers the function in the Part 2
          value={this.state.verified}
      />
      <label for="verified">
      <small>Verified</small>
      </label>
  </form>

<div className="display__lbl_input">
              <input
                type="checkbox"
                onChange={this.handleChangeFilGasoil}
                value="Filter Gasoil"
                name="Filter Gasoil"
                id=""
              />
              <label htmlFor="">Filter Gasoil</label>
            </div>

handleChangeFilGasoil = (e) => {
    if(e.target.checked){
        this.setState({
            checkedBoxFG:e.target.value
        })
        console.log(this.state.checkedBoxFG)
    }
    else{
     this.setState({
        checkedBoxFG : ''
     })
     console.log(this.state.checkedBoxFG)
    }
  };

상태 변수 "enableSwitch"와 함수 "handleSwitch"를 사용하여 기본 선택된 스위치를 처리할 수 있습니다.

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="switchId" checked={this.state.enableSwitch} onClick={this.handleSwitch}/>
    <label class="custom-control-label" for="switchId">switch text</label>
</div>

다음은 사용자가 스위치를 클릭하면 변수를 반전시키는 기능입니다.

handleSwitch = (e) => {
   this.setState({ enableSwitch: !this.state.enableSwitch });
}

오래된 질문에 대한 답변이 늦다는 것은 알지만, 이 간단한 솔루션이 다른 사용자에게 도움이 될 수 있습니다.

 <div className="form-group">
          <div className="checkbox">
            <label><input type="checkbox" value="" onChange={this.handleInputChange.bind(this)}  />Flagged</label>
            <br />
            <label><input type="checkbox" value=""  />Un Flagged</label>
          </div>
        </div

handle Input Change(이벤트){

console.log("event",event.target.checked)   }

위 핸들은 선택 또는 선택 해제 시 true 또는 false 값을 제공합니다.

상태를 임의의 []타입으로 설정합니다.컨스트럭터에서 상태를 null로 설정합니다.

onServiceChange = (e) => {
    const {value} = e.target;
    const index = this.state.services.indexOf(value);
    const services = this.state.services.filter(item => item !== value);
    this.setState(prevState => ({
        services: index === -1 ? prevState.services.push(value) && prevState.services : this.state.services.filter(item => item !== value)
    }))
}

입력 요소 내

this.onServiceChange(e)}/> this.onServiceChange(e)}/> this.onServiceChange(e)}/> this.onServiceChange(e)}/>

시간이 좀 지나서야 알았어요.도움이 될 것 같아서:)

언급URL : https://stackoverflow.com/questions/32174317/how-to-set-default-checked-in-checkbox-reactjs