Question

我在这里面临一些问题。我正在尝试将函数中的参数传递给this.setState回调，但我无法弄清楚这是怎么回事。

我的代码如下所示：

selectHandler(event){
    this.setState({
        selectedImage: event.target
    }, (event) => {
        this.markSelectedHandler(event)
    })
}

markSelectedHandler(e){
    e.target.classList.add('active')
    if(e.target !== this.state.selectedImage && this.state.selectedImage){
        this.state.selectedImage.classList.remove('active')
        e.target.classList.add('active')
    }
}

e.target返回null，知道为什么会这样吗？

Answer 1

您在此代码中隐藏了go func() { for i:= 1; true; i++ { fmt.Println(i) } }() select { }：

event

您不需要通过不传递具有相同名称的参数（selectHandler(event){ this.setState({ selectedImage: event.target }, (event) => { this.markSelectedHandler(event) }) }到event回调）来遮蔽：

setState

Answer 2

该事件不会异步。您需要提取值或使用e.persist（）reactjs.org/docs/events.html#event-pooling

但你可以说：

selectHandler(event){
    const { target } = event;

    this.setState({
        selectedImage: target
    }, () => {
        this.markSelectedHandler(target)
    })
}

markSelectedHandler(target){
    target.classList.add('active')
    if(target!== this.state.selectedImage && this.state.selectedImage){
        this.state.selectedImage.classList.remove('active')
        target.classList.add('active')
    }
}

但我会建议反对..

说实话，您不应该使用DOM操作添加您的类，而是将其添加到渲染<img className={this.state.selectedImage === myImage ? 'active' : undefined} />

中

Answer 3

尽量不要将event作为参数发送给回调

例如你已经写过了

selectHandler(event){
    this.setState({
        selectedImage: event.target
    }, (event) => {
        this.markSelectedHandler(event)
    })
}

这样改写

selectHandler(event){
    this.setState({
        selectedImage: event.target
    }, () => {
        this.markSelectedHandler(event)
    })
}

将参数从函数传递给this.setState回调函数

3 个答案: