onClick和onChange不会在reactjs中的safari单选按钮上触发
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了onClick和onChange不会在reactjs中的safari单选按钮上触发相关的知识,希望对你有一定的参考价值。
在ReactJS中处理Radio按钮上的事件的最佳做法是什么?单选按钮在safari中不起作用文档显示在“处理事件”文档中使用“onClick”,并在“Forms”文档中使用“onChange”。 onChange只在Radio Buttons上触发一次,所以我目前正在使用onClick。
答案
带复选框的示例。使用单选按钮我假设你有一个无线电组。
构造函数:
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>
I agree to the term
</label>
</div>
编辑:handleSwitchChange函数不在render函数中;)
以上是关于onClick和onChange不会在reactjs中的safari单选按钮上触发的主要内容,如果未能解决你的问题,请参考以下文章
Reactjs:在onClick方法中传递参数而不会造成性能损失[重复]
change事件和onchange事件,click事件和onclick事件这些都有啥区别
reactjs preventDefault() 不会阻止表单提交时页面重新加载