![](/img/trans.png)
[英]Stateless React component with onChange handler: Synthetic event warning
[英]React checkbutton onChange event returns synthetic event
我有一个 React 复选框组件。 我试图在每次点击时更改 state,并根据之前的 state 运行 function。在 React 上,每次我单击按钮时,我都试图将事件返回到 index.js 中的 console.log function。
但它总是返回合成事件,我无法达到 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
。 这是一个空操作 function。如果您必须保留原始合成事件,请使用 event.persist()。 有关详细信息,请参阅 fb.me/react-event-pooling。
尝试这样做:
<input onChange={e => onChangeHandler(e.target.value)}></input>
可以使用event.currentTarget
代替event.target
来获取特定的目标元素。
更新:关于您的更新和错误,您可以尝试这样做:代替使用<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>
如果您想要结果,Yoy可以尝试This。
console.log(event.currentTarget.checked);
它将返回true或false
不需要做
<input onChange={(e)=>{onchangeHandler(e)}}>
UPDATE
综合错误事件
index.js:1375警告:出于性能原因,此合成事件被重用。 如果看到此消息,则说明正在释放/无效的综合事件上访问方法currentTarget。 这是一项无操作功能。 如果必须保留原始的合成事件,请使用event.persist()。 有关更多信息,请参见fb.me/react-event-pooling。
简单的只是打电话。
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
};
}); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.