React校验按钮onChange事件返回合成事件
我有一个React复选框组件。我试图在每次单击时更改状态，并根据以前的状态运行一个函数。在function上，每次单击按钮时，我都试图将事件返回到index.js中的index.js函数。
但它总是返回合成事件，我无法到达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/ See事件池。
回答 3
Stack Overflow用户
发布于 2019-08-06 20:29:14
不要使用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>Stack Overflow用户
发布于 2022-03-17 17:36:09
试着去做：
<input onChange={e => onChangeHandler(e.target.value)}></input>Stack Overflow用户
发布于 2019-08-06 20:55:15
如果你想要结果，你可以试试这个。
console.log(event.currentTarget.checked);它将返回真或假。
没有必要去做
<input onChange={(e)=>{onchangeHandler(e)}}>更新
综合错误事件
index.js:1375警告:出于性能原因，将重用此合成事件。如果您看到这一点，您将访问已释放/无效的合成事件上的方法currentTarget。这是一个非操作函数。如果必须保留原始合成事件，请使用event.persist()。有关更多信息，请参见fb.me/ See事件池。
打个电话就行了。
onChangeHandler(event) {
event.persist();
this.setState(function(previousState, props) {
console.log("State: ", this.state.checked);
if (previousState.checked === true) {
props.onCheckedRun(event.currentTarget.checked);
} else {
props.onUncheckedRun(event.currentTarget.checked);
}
return {
checked: !this.state.checked
};
}); }https://stackoverflow.com/questions/57383508
复制相似问题
腾讯云开发者
