如何将值传递给React中的状态更改回调？

我有以下匿名函数回调的setState后：如何将值传递给React中的状态更改回调？

processOnBlur(event) { 
     this.setState({ 
     input: event.target.id 
     }, (event) => { 
     console.log(event.target.id); 
     }); 
    }

然而，event回调里面是不确定的。我如何将事件对象传递给回调函数？它甚至有可能吗？

来源

2016-05-23 reectrix

不要在所有'（）=> {... console.log ...'传递'event'参数，这是箭头函数，它可能会接收'processOnBlur'上传递的'event'米不确定。 – dmi3y

传递一个回调函数来setState()将执行该功能已经发生了状态改变后，这这种情况意味着即使正确传入，您的事件目标在回调内部也会为空（状态发生变化并且您的组件重新渲染，React擦除了事件并且不再有目标）。

有可以解决这个问题，第一关几个方法，你所做的仅仅是设置输入的状态等于event.target.id这意味着你必须通过国家访问它在你的回调函数：

processOnBlur(event) { 
    this.setState({ 
    input: event.target.id 
    },() => { 
    console.log(this.state.input); 
    }); 
}

另一种选择是在输入上设置一个ref，这是一个React功能，可为您提供该组件的引用，您可以在类功能中自由使用该引用。

所以您的输入：

<input id="username" 
     type="text" 
     ref="myInput" 
     onBlur={(e) => this.processOnBlur(e)} />

然后你就可以访问它，在你的事件处理程序通过this.refs.myInput，就像这样：

processOnBlur(event) { 
    this.setState({ 
    input: event.target.id 
    },() => { 
    console.log(this.refs.myInput.id); 
    }); 
} 

// You could also use it to set your input state if you really wanted to, 
// though event.target is probably more appropriate. 
// 
// input: this.refs.myInput.id

编辑：一个额外的方法，我忘了（也许在这种情况下最简单）就是传递给事件处理函数的事件event.persist()：

processOnBlur(event) { 
    event.persit(); 

    this.setState({ 
    input: event.target.id 
    },() => { 
    console.log(event.target.id); 
    }); 
}

这可以防止React擦除事件引用，以便您可以保留对其的访问。

来源

2016-05-23 18:36:07

你掩饰你的event对象到一个新的变量，也叫event - 在一个箭头功能的括号内的东西是它的参数，你传递不是在这是你的代码应该是什么样子。：

processOnBlur(event) { 
    this.setState({ 
     input: event.target.id 
    },() => { 
     console.log(event.target.id); 
    }); 
}

而有效之前，你在做：

function callback(event) { // This is a different event parameter! 
    console.log(event.target.id); 
} 

processOnBlur(event) { 
    this.setState({ 
     input: event.target.id 
    }, callback); // See? You're not actually passing event in 
}

来源

2016-05-23 18:01:58

如何将值传递给React中的状态更改回调？

回答

相关问题