Bagaimana mengatur default Diperiksa di kotak centang ReactJS?

Saya mengalami masalah untuk memperbarui status kotak centang setelah ditetapkan dengan nilai default checked="checked"di Bereaksi.

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

Setelah menetapkan checked="checked", saya tidak dapat berinteraksi dengan kotak centang dengan mengklik untuk menghapus centang / centang.

Untuk berinteraksi dengan kotak, Anda perlu memperbarui status untuk kotak centang setelah Anda mengubahnya. Dan untuk memiliki pengaturan default bisa Anda gunakan defaultChecked.

Sebuah contoh:

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

Ada beberapa cara untuk mencapai ini, inilah beberapa:

Ditulis menggunakan State Hooks :

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'),
);

Berikut ini adalah demo langsung di JSBin .

Ditulis menggunakan Komponen :

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'),
);

Berikut ini adalah demo langsung di JSBin .

Jika kotak centang dibuat hanya dengan React.createElementproperti maka defaultCheckeddigunakan.

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

Kredit ke @nash_ag

Dalam siklus hidup rendering Bereaksi, atribut nilai pada elemen formulir akan menimpa nilai dalam DOM. Dengan komponen yang tidak terkontrol, Anda sering ingin Bereaksi menentukan nilai awal, tetapi membiarkan pembaruan selanjutnya tidak terkontrol. Untuk menangani kasus ini, Anda dapat menentukan defaultValue atau atribut defaultChecked, bukan nilai.

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

Atau

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

Silakan cek lebih detail mengenai defaultCheckedkotak centang di bawah ini: https://reactjs.org/docs/uncontrolled-components.html#default-values

selain jawaban yang benar Anda bisa melakukan: P

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

Itu berhasil

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

Dan berfungsi di dalamnya

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

Anda dapat meneruskan "true" atau "" ke properti yang dicentang dari kotak centang masukan. Kutipan kosong ("") akan dipahami sebagai salah dan item tidak akan dicentang.

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>

Dalam kasus saya, saya merasa bahwa "defaultChecked" tidak berfungsi dengan benar dengan kondisi / kondisi. Jadi saya menggunakan "diperiksa" dengan "onChange" untuk mengubah status.

Misalnya.

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

Ini kode yang saya lakukan beberapa waktu lalu, mungkin berguna. Anda harus bermain dengan baris ini => 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>

inilah codepen => http://codepen.io/parlop/pen/EKmaWM

Jangan membuatnya terlalu sulit. Pertama, pahami contoh sederhana yang diberikan di bawah ini. Ini akan jelas bagi Anda. Dalam hal ini, tepat setelah menekan kotak centang, kami akan mengambil nilai dari keadaan (awalnya itu salah), mengubahnya ke nilai lain (awalnya itu benar) & mengatur negara sesuai. Jika kotak centang ditekan untuk kedua kalinya, itu akan melakukan proses yang sama lagi. Meraih nilainya (sekarang benar), ubah (menjadi salah) & kemudian setel statusnya (sekarang salah lagi. Kode dibagikan di bawah ini.

Bagian 1

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

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

Bagian 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>

ini dapat dilakukan dengan js murni

              <Form.Group controlId="categoryStatus">
                <Form.Check
                  type="checkbox"
                  label="Category Status Active/In-active"
                  onChange={this.handleChecked}                 
                />
              </Form.Group>

  //Load category to form : to edit
  GetCategoryById(id) {
    this.UpdateId = id
    axios.get('http://localhost:4000/Category/edit/' + id)
      .then(response => {
        this.setState({
          category_name: response.data.category_name,
          category_description: response.data.category_description,
          is_active: response.data.is_active,
        });

        response.data.is_active == 1 ? document.getElementById("categoryStatus").checked = true : document.getElementById("categoryStatus").checked = false;
      })
      .catch(function (error) {
        console.log(error);
      })
  }

 <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

handleInputChange (event) {

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

pegangan Di Atas memberi Anda nilai benar atau salah pada saat dicentang atau tidak dicentang

Saya menetapkan status sebagai tipe [] apa pun. dan dalam konstruktor atur status ke nol.

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

Pada elemen input

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

Saya menemukan jawabannya setelah beberapa waktu. Kupikir itu mungkin membantu kalian semua :)