覆盖组件中的合成事件
覆盖组件中的合成事件
提问于 2016-04-04 04:32:19
在UI库中，我有一个复选框类，它允许用户向表单中添加inputtype=checkbox，对其进行样式设置并添加额外的功能：
export class Checkbox extends React.Component({
render() {
return(
<div className="form-component">
<input type="checkbox"
defaultChecked={this.props.value}
checked={this.props.value}
name={this.props.name} />
<label>{this.props.label}</label>
</div>
)
}
});更改处理程序在窗体级别执行。
export class Page extends React.Component({
handleChange(event) {
let state = {};
state[event.target.name] = event.target.value;
this.setState(state);
}
render() {
<form onChange={this.handleChange}>
<Input value={this.state.value} name="input1" />
<Checkbox value={this.state.value} name="checkbox1" />
</form>
}
})输入中的合成变更事件返回带有event.target.name和event.target.value的事件对象。复选框中有event.target.checked。在handle事件中，我可以看到它相应地选择了哪种类型的元素。
但是，是否有一种方法可以覆盖从复选框组件发出的事件，以便event.target.value === event.target.checked
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-04-04 06:52:07
您可以在它的CheckBox事件上更改它的值。因为CheckBox中的事件将在onChange事件之前调用，所以可以格式化e.target以返回所需的内容。试试这个：
var CheckBox = React.createClass({
handleChange: function(e){
e.target.value = e.target.checked
},
render: function(){
return (
<div className="form-component">
<input type="checkbox"
defaultChecked={this.props.value}
checked={this.props.value}
name={this.props.name}
onChange={this.handleChange}
/>
<label>{this.props.label}</label>
</div>
)
}
});但是要小心，e.target.value只是转换成字符串"false"和"true"，而不是Boolean
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36394614
复制相关文章
相似问题
腾讯云开发者
