Javascript 在事件处理程序中调用从父组件传递下来的回调,然后将变量重新分配给某个值
本质上,我希望调用从父组件传递下来的回调,然后重新分配一个值。我尝试创建一个类方法,从父组件props调用给定的回调函数,但是我得到了一个带有setState的无限循环。在另一个我尝试过但目前似乎无法复制的方法上,抛出了一个错误,指出Javascript 在事件处理程序中调用从父组件传递下来的回调,然后将变量重新分配给某个值,javascript,reactjs,callback,variable-assignment,Javascript,Reactjs,Callback,Variable Assignment,本质上,我希望调用从父组件传递下来的回调,然后重新分配一个值。我尝试创建一个类方法,从父组件props调用给定的回调函数,但是我得到了一个带有setState的无限循环。在另一个我尝试过但目前似乎无法复制的方法上,抛出了一个错误,指出“回调不是函数” 也许,我用了一种奇怪的方式来表达。下面是一个例子: class ParentComponent extends React.Component { constructor(props) { super(props); this
“回调不是函数”
也许,我用了一种奇怪的方式来表达。下面是一个例子:
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = { parentState: true }
this._handleToggle = this._handleToggle.bind(this);
}
_handleToggle() {
this.setState({ parentState: !this.state.parentState })
}
render() {
return (
<ChildComponent
onSomeEvent={this._handleToggle}
/>
)
}
}
class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.randomInteger = 8;
this._invokeCallback = this._invokeCallback.bind(this);
}
// this is where I'm having trouble
_invokeCallback(callback) {
callback();
this.randomInteger = 0;
}
render() {
const { onSomeEvent } = this.props;
// Error
return (
<button onClick={this._invokeCallback(onSomeEvent)} />
)
}
}
类ParentComponent扩展了React.Component{
建造师(道具){
超级(道具);
this.state={parentState:true}
this.\u handleToggle=this.\u handleToggle.bind(this);
}
_手语{
this.setState({parentState:!this.state.parentState})
}
render(){
返回(
)
}
}
类ChildComponent扩展了React.Component{
建造师(道具){
超级(道具);
这个.randomInteger=8;
this.\u invokeCallback=this.\u invokeCallback.bind(this);
}
//这就是我遇到麻烦的地方
_invokeCallback(回调){
回调();
这个.randomInteger=0;
}
render(){
const{onSomeEvent}=this.props;
//错误
返回(
)
}
}
我想从这里得到的是,在调用从父组件传递的回调后,将this.randomInteger
重新指定为某个值。从这里我能做什么
如果我的示例缺少某些部分或不完整,我深表歉意。我正赶着写这篇文章。请随时更正我在措辞或示例代码中犯的任何错误。提前感谢。您的\u invokeCallback将立即执行 由于括号和在此传递参数
this.\u invokeCallback(onSomeEvent)
,您正在将onClick设置为\u invokeCallback方法的结果
这就是导致无限循环的原因,父对象中的setState导致子对象中重新渲染,然后再次执行\u invokeCallback,依此类推
您可以使用带有onClick的匿名函数,以便\u invokeCallback仅在单击按钮时执行:
render() {
const { onSomeEvent } = this.props
return (
<button onClick={ () => this._invokeCallback(onSomeEvent) } />
)
}
render(){
const{onSomeEvent}=this.props
返回(
这。_invokeCallback(onSomeEvent)}/>
)
}
或者,您可以从调用回调方法调用onSomeEvent函数:
_invokeCallback() {
this.props.onSomeEvent()
this.randomInteger = 0
}
render() {
return (
<button onClick={ this._invokeCallback } />
)
}
\u invokeCallback(){
this.props.onSomeEvent()
this.randomInteger=0
}
render(){
返回(
)
}
没问题。很高兴这帮了你。