ReactJS can't set state from an event with event.persist()

前端未结

关注

 5  965

I need to set a state field which I get from an event, but it doesn\'t get set when I pass a function to it. The component and method looks like the following:

相关标签:

5条回答

后悔当初

2020-12-08 00:46

There is a nice description about this problem and 2 different solution, you can check with this link

0 讨论(0)
发布评论:

提交评论
- 加载中...
盖世英雄少女心

2020-12-08 00:57
That's the expected behaviour, because event.persist() doesn't imply that currentTarget is not being nullified, in fact it should be - that's compliant with browser's native implementation.

This means that if you want to access currentTarget in async way, you need to cache it in a variable as you did in your answer.

To cite one of the React core developers - Sophie Alpert.

currentTarget changes as the event bubbles up – if you had a event handler on the element receiving the event and others on its ancestors, they'd see different values for currentTarget. IIRC nulling it out is consistent with what happens on native events; if not, let me know and we'll reconsider our behavior here.

Check out the source of the discussion in the official React repository and the following snippet provided by Sophie that I've touched a bit.
```
var savedEvent;
var savedTarget;

divb.addEventListener('click', function(e) {
  savedEvent = e;
  savedTarget = e.currentTarget;
  setTimeout(function() {
    console.log('b: currentTarget is now ' + e.currentTarget);
  }, 0);
}, false);

diva.addEventListener('click', function(e) {
  console.log('same event object? ' + (e === savedEvent));
  console.log('same target? ' + (savedTarget === e.currentTarget));
  setTimeout(function() {
    console.log('a: currentTarget is now ' + e.currentTarget);
  }, 0);
}, false);
```
```
div {
  padding: 50px;
  background: rgba(0,0,0,0.5);
  color: white;
}
```
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <div id="diva"><div id="divb"> Click me and see output! </div></div>
  
</body>
</html>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
萌比男神i

2020-12-08 01:02
I came across similar warning message when filling components dynamically and to solve this I just had to wrap function with arrow function.

From:
```
{ text: "Delete item", onClick: deleteItem },
```
To:
```
{ text: "Delete item", onClick: (id) => deleteItem(id) },
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
不知归路

2020-12-08 01:08
With the comment from @thirtydot I got a working solution.

I think it's because setState is "async", so by the time the function you pass to setState is executed (and the event is accessed), the event is no longer around. In the second version, the event is accessed immediately and its currentTarget passed to setState

So I stored the event.currentTarget to a variable and used that as it's explained in the ReactJs Event Pooling

Looks like this and it works
```
private toggleFilter = (event: any) => {
        let target = event.currentTarget;   
        this.setState((prevState) => ({
            isFiltering: !prevState.isFiltering,
            anchor: target
        }));
    }
```
However this does not explain why event.persist() is not working. I'll accept the answer which explains it.
0 讨论(0)
发布评论:

提交评论
- 加载中...
一向

2020-12-08 01:12
To resolve this issue - before calling handleSubmit of form, call event.persist() and then in handleSubmit() definition - write your logic. For e.g.
```
<form id="add_exp_form" onSubmit={(event) => {event.persist();this.handleSubmit(event)}}>

handleSubmit(event){
    // use event.currentTarget - It will be visible here
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...