[reactjs] 기본값을 설정하는 방법 ReactJS 체크 박스?

checked="checked"React에서 기본값으로 할당 된 확인란 상태를 업데이트하는 데 문제가 있습니다.

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"
        checked={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"
          checked={this.state.isChecked}
          onChange={this.toggleChange}
        />
        Check Me!
      </label>
    );
  }
}

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

다음은 JSBin 의 라이브 데모입니다 .

답변

확인란만으로 만든 경우 React.createElement속성
defaultChecked이 사용됩니다.

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

@nash_ag에 신용

답변

React 렌더링 수명주기에서 양식 요소의 value 속성은 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/>

답변

작동합니다

<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”또는 “”를 입력 확인란의 checked 속성으로 전달할 수 있습니다. 빈 따옴표 ( “”)는 거짓으로 이해되며 항목은 선택 해제됩니다.

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>