Làm cách nào để đặt mặc định Đã kiểm tra trong hộp kiểm ReactJS?

Tôi gặp sự cố khi cập nhật trạng thái hộp kiểm sau khi được gán với giá trị mặc định checked="checked"trong React.

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

Sau khi gán checked="checked", tôi không thể tương tác trạng thái hộp kiểm bằng cách nhấp để bỏ chọn / kiểm tra.

Để tương tác với hộp, bạn cần cập nhật trạng thái cho hộp kiểm khi bạn thay đổi. Và để có một thiết lập mặc định, bạn có thể sử dụng defaultChecked.

Một ví dụ:

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

Có một vài cách để thực hiện điều này, đây là một vài cách:

Viết bằng cách sử dụng móc trạng thái :

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

Đây là một bản demo trực tiếp trên JSBin .

Viết bằng các thành phần :

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

Đây là một bản demo trực tiếp trên JSBin .

Nếu hộp kiểm được tạo chỉ với React.createElementthì thuộc tính defaultCheckedđược sử dụng.

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

Tín dụng cho @nash_ag

Trong vòng đời kết xuất React, thuộc tính value trên các phần tử biểu mẫu sẽ ghi đè giá trị trong DOM. Với một thành phần không được kiểm soát, bạn thường muốn React chỉ định giá trị ban đầu, nhưng không kiểm soát được các bản cập nhật tiếp theo. Để xử lý trường hợp này, bạn có thể chỉ định thuộc tính defaultValue hoặc defaultChecked thay vì value.

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

Hoặc là

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

Vui lòng kiểm tra thêm chi tiết về defaultCheckedhộp kiểm bên dưới: https://reactjs.org/docs/uncontrolled-components.html#default-values

ngoài câu trả lời đúng bạn có thể làm: P

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

Nó đang làm việc

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

Và chức năng khởi tạo nó

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

Bạn có thể chuyển "true" hoặc "" cho thuộc tính được chọn của hộp kiểm đầu vào. Các trích dẫn trống ("") sẽ được hiểu là sai và mục này sẽ không được chọn.

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>

Trong trường hợp của tôi, tôi cảm thấy rằng "defaultChecked" không hoạt động đúng với các trạng thái / điều kiện. Vì vậy, tôi đã sử dụng "kiểm tra" với "onChange" để chuyển trạng thái.

Ví dụ.

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

Đây là một mã tôi đã làm cách đây một thời gian, nó có thể hữu ích. bạn phải chơi với dòng này => this.state = {đã kiểm tra: sai, đã kiểm tra2: đúng};

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>

đây là codepen => http://codepen.io/parlop/pen/EKmaWM

Đừng làm nó quá khó. Đầu tiên, hiểu một ví dụ đơn giản được đưa ra dưới đây. Nó sẽ rõ ràng với bạn. Trong trường hợp này, chỉ sau khi nhấn hộp kiểm, chúng tôi sẽ lấy giá trị từ trạng thái (ban đầu là sai), thay đổi nó thành giá trị khác (ban đầu là đúng) và đặt trạng thái phù hợp. Nếu hộp kiểm được nhấn lần thứ hai, nó sẽ thực hiện lại quy trình tương tự. Lấy giá trị (bây giờ là đúng), thay đổi giá trị (thành sai) và sau đó đặt trạng thái tương ứng (bây giờ lại sai. Mã được chia sẻ bên dưới.

Phần 1

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

Phần 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 
  });
}; 

Phần 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>

điều này có thể được thực hiện với js thuần

              <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

xử lýInputChange (sự kiện) {

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

tay cầm ở trên cung cấp cho bạn giá trị đúng hoặc sai khi được kiểm tra hoặc không bị kiểm tra

Tôi đặt trạng thái là bất kỳ loại []. và trong hàm tạo đặt trạng thái thành 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)
    }))
}

Trong phần tử đầu vào

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

Tôi đã tìm ra nó sau một thời gian. Nghĩ rằng nó có thể giúp bạn :)