web-dev-qa-db-ja.com

デフォルトを設定する方法チェックインチェックボックスReactJS？

Reactでデフォルト値checked = "checked"で割り当てた後、チェックボックスの状態を更新するのに問題があります。

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

checked="checked"を割り当てた後、クリックしてチェックを外したりチェックしたりしてチェックボックスの状態を変更することはできません。

reactjscheckbox
117
Yarin Nim

チェックボックスがReact.createElementでのみ作成された場合、プロパティdefaultCheckedが使用されます。

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

@nash_agのクレジット

42
Yarin Nim

ボックスを操作するには、変更後にチェックボックスの状態を更新する必要があります。そしてデフォルトの設定をするためにはdefaultCheckedを使うことができます。

例：

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

これを達成するにはいくつかの方法があります。

ES6で書かれています：

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 のライブデモです。

あるいは普通のJavaScriptでは：

var Checkbox = React.createClass({
  getInitialState: function() {
    return {
      isChecked: true
    };
  },
  toggleChange: function() {
    this.setState({
      isChecked: !this.state.isChecked // flip boolean value
    }, function() {
      console.log(this.state);
    }.bind(this));
  },
  render: function() {
    return (
      <label>
        <input
          type="checkbox"
          checked={this.state.isChecked}
          onChange={this.toggleChange} />
        Check Me!
      </label>
    );
  }
});

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

繰り返しますが、 JSBin のライブデモで.

41
Jon Saw

あなたがすることができる正しい答えに加えて：P

<input name="remember" type="checkbox" defaultChecked/>
8
Fareed Alnamrouti

Reactのレンダリングライフサイクルでは、フォーム要素のvalue属性がDOMの値を上書きします。制御されていないコンポーネントでは、Reactに初期値を指定させたいが、それ以降の更新は制御されないままにしておくことがよくあります。この場合を処理するために、valueの代わりにdefaultValueまたはdefaultChecked属性を指定できます。

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

または

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

以下のチェックボックスのdefaultCheckedに関する詳細を確認してください。 https://reactjs.org/docs/uncontrolled-components.html#default-values

4
Murtaza Hussain

それは働いています

<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 })}
4
user2061097

入力チェックボックスのcheckedプロパティに "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>
1
ponteskl

これは私がしばらく前にしたコードです、それは役に立つかもしれません。この行で遊ぶ必要があります=> 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>

これがcodepenです=> http://codepen.io/parlop/pen/EKmaWM

0
Southpaw

難しくしすぎないでください。まず、以下に示す簡単な例を理解してください。それはあなたに明らかです。この場合、チェックボックスを押した直後に、状態から値を取得し（初期値はfalse）、他の値に変更し（初期値はtrue）、それに応じて状態を設定します。チェックボックスが2回目に押されると、同じプロセスが再び実行されます。値を取得（現在は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>
0
Md Fazlul Karim