onClick และ onChange จะไม่เริ่มทำงานบนปุ่มตัวเลือกสำหรับซาฟารีใน reactjs

แนวปฏิบัติที่ดีที่สุดในการจัดการเหตุการณ์บนปุ่มตัวเลือกใน ReactJS คืออะไร ปุ่มตัวเลือกไม่ทำงานในซาฟารี เอกสารแสดงการใช้ "onClick" ในเอกสาร "การจัดการเหตุการณ์" และแสดงโดยใช้ "onChange" ในเอกสารประกอบ "แบบฟอร์ม" onChange เริ่มทำงานเพียงครั้งเดียวบนปุ่มตัวเลือก ดังนั้นฉันจึงใช้ onClick สำหรับปุ่มเหล่านั้น


person Shobhit    schedule 20.12.2017    source แหล่งที่มา
comment
คุณมีรหัสใด ๆ ที่จะแสดง? อาจเป็นการตัดและวางข้อผิดพลาดจากคอนโซลใช่ไหม   -  person Kyle Richardson    schedule 20.12.2017


คำตอบ (1)


ตัวอย่างพร้อมช่องทำเครื่องหมาย ด้วยปุ่มตัวเลือก ฉันถือว่าคุณมีกลุ่มวิทยุ

ตัวสร้าง :

constructor() {
    super();
    this.state = {
        agreements: false,
    };
    this.handleSwitchChange = this.handleSwitchChange.bind(this);
}

ในฟังก์ชัน handleSwitchChange

handleSwitchChange(event){
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
        [name]: value
    });
}

และในฟังก์ชันการเรนเดอร์:

           <div className="col-xs-12">
                <label className="label">
                    <input type="checkbox" name="agreements" checked={this.state.agreements} value={this.state.agreements} onClick={this.handleSwitchChange}/>
                    <span></span>
                    &nbsp;I agree to the term
                </label>
            </div>

แก้ไข: ฟังก์ชัน handleSwitchChange ไม่ได้อยู่ในฟังก์ชันการเรนเดอร์ ;)

person Akim Benchiha    schedule 20.12.2017