วิธีการตั้งค่าเริ่มต้นเช็คอินในช่องทำเครื่องหมาย 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} />

มีสองสามวิธีในการทำสิ่งนี้ให้สำเร็จดังนี้:

เขียนโดยใช้ 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'),
);

นี่คือการสาธิตสดบน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} />

และฟังก์ชั่น init มัน

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

คุณสามารถส่งผ่าน "จริง" หรือ "" ไปยังคุณสมบัติที่ตรวจสอบแล้วของช่องทำเครื่องหมายอินพุต คำพูดที่ว่างเปล่า ("") จะถูกเข้าใจว่าเป็นเท็จและรายการจะไม่ถูกตรวจสอบ

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>

ในกรณีของฉันฉันรู้สึกว่า "defaultChecked" ทำงานไม่ถูกต้องกับสถานะ / เงื่อนไข ดังนั้นฉันใช้ "ตรวจสอบ" กับ "onChange" เพื่อสลับสถานะ

เช่น.

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

นี่คือรหัสที่ฉันทำเมื่อไม่นานมานี้อาจเป็นประโยชน์ คุณต้องเล่นกับบรรทัดนี้ => 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

อย่าทำให้ยากเกินไป ก่อนอื่นให้ทำความเข้าใจตัวอย่างง่ายๆที่ให้ไว้ด้านล่าง มันจะชัดเจนสำหรับคุณ ในกรณีนี้หลังจากกดช่องทำเครื่องหมายเราจะคว้าค่าจากสถานะ (เริ่มแรกเป็นเท็จ) เปลี่ยนเป็นค่าอื่น (เริ่มแรกเป็นจริง) และตั้งค่าสถานะตามลำดับ หากกดช่องทำเครื่องหมายเป็นครั้งที่สองจะทำกระบวนการเดียวกันอีกครั้ง คว้าค่า (ตอนนี้มันเป็นจริง) เปลี่ยน (เป็นเท็จ) จากนั้นตั้งค่าสถานะให้สอดคล้องกัน (ตอนนี้มันเป็นเท็จอีกครั้งรหัสจะถูกแชร์ด้านล่าง

ส่วนที่ 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>

สิ่งนี้สามารถทำได้ด้วย js บริสุทธิ์

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

ตัวจัดการด้านบนให้ค่าของจริงหรือเท็จเมื่อทำเครื่องหมายหรือไม่ถูกตรวจสอบ

ฉันตั้งค่าสถานะเป็นชนิดใด ๆ [] และในตัวสร้างตั้งค่าสถานะเป็นโมฆะ

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

ฉันคิดออกมาหลังจากเวลา คิดว่าอาจช่วยคุณได้ทุกคน :)