javascript - React checkbutton onChange 事件返回合成事件
问题描述
我有一个 React 复选框组件。我试图在每次点击时更改状态并根据之前的状态运行一个函数。在 React 上,每次单击按钮时,我都试图将事件返回到 index.js 中的 console.log 函数。
但它总是返回合成事件,我无法达到 event.target.value。
我的 index.js 和道具是;
ReactDOM.render(<ReactCheckBox
isChecked={false}
textCheck="Checked"
textUncheck="Checked"
onCheckedRun={event => console.log(event.target)}
onUncheckedRun={event => console.log(event.target)}
buttonPosition="right"
/>, document.getElementById('myCheckBox'))
我的 ReactCheckBox 组件是;
import React, { Component } from 'react'
class ReactCheckBox extends Component {
constructor(props) {
super(props)
this.state = {
checked: ""
}
this.onChangeHandler = this.onChangeHandler.bind(this)
}
componentDidMount() {
this.setState({
checked: this.props.isChecked
})
}
onChangeHandler(event) {
this.setState(function (previousState, props) {
console.log('State: ',this.state.checked)
if (previousState.checked === true) {
props.onCheckedRun(event)
} else {
props.onUncheckedRun(event)
}
return {
checked: !this.state.checked
}
}
)
}
render() {
if (this.props.disabled === "true") {
return (
<div>
<div className="form-check">
<label className="form-check-label">
<div className="uniform-checker border-primary-600 text-primary-800">
<span className="checked">
<input onChange={this.onChangeHandler} type="checkbox" className="form-check-input-styled-primary" defaultChecked={this.state.checked ? 'checked' : 'unchecked'} data-fouc="" disabled></input>
</span>
</div>
Primary checkbox
</label>
</div>
</div>
)
}
else {
return (
<div>
<div>
<div className="form-check">
<label className="form-check-label">
<div className="uniform-checker border-primary-600 text-primary-800">
<span className={this.state.checked ? 'checked' : 'unchecked'}>
<input onChange={this.onChangeHandler} type="checkbox" className="form-check-input-styled-primary" defaultChecked={this.state.checked ? 'checked' : 'unchecked'} ></input>
</span>
</div>
Primary checkbox
</label>
</div>
</div>
</div>
)
}
}
}
export default ReactCheckBox
有没有人有同样的问题?我怎样才能克服合成事件并获得真实事件,以便达到它的价值?
更新
综合错误事件
index.js:1375 警告:出于性能原因,此合成事件被重用。如果您看到此内容,则表示您正在访问已
currentTarget
发布/无效合成事件的方法。这是一个无操作功能。如果您必须保留原始合成事件,请使用 event.persist()。有关更多信息,请参阅 fb.me/react-event-pooling。
解决方案
而不是event.target
尝试event.currentTarget
获取特定的目标元素。
更新:
关于您的更新和错误,您可以尝试这样做:而不是使用<input onChange={this.onChangeHandler}>
这样做:
<input onChange={(e)=>{this.onChangeHandler(e)}}>
要不就:
<input onChange={(e)=>{onchangeHandler(e)}}>
所以整行将是:
<input onChange={()=>{this.onChangeHandler(e)}} type="checkbox" className="form-check-input-styled-primary" defaultChecked={this.state.checked ? 'checked' : 'unchecked'} ></input>
推荐阅读
- pandas - AttributeError:“系列”对象没有属性“管道”
- sql - 如何使用表连接将两个查询合并为一个
- excel - 将一行复制到同一工作表中的表格底部
- javascript - 修复了在页眉和页脚之间带有字母和邮筒的纵横比框
- vba - 在 Access 中创建 Outlook 收件箱电子邮件表
- python - 验证和训练不会同时收敛,但验证仍然会收敛
- ios - Unreal HandheldAR 模板:找不到异步加载代码请求的包 /Script/AugmentedReality 的文件
- python - 比较两个网络边缘列表
- informatica-powercenter - Informatica - 由于主键列的唯一约束违规而失败
- reactjs - 如何从 Draftjs 中检索文本