React Event is always Istrusted:false

Question

I've created a simple React app that handles a click even. When the onChange event is triggered the event object I get back is {"isTrusted":false}. I have included my code below.

export default class App extends React.Component {
  HandleChange(event)
    {
      console.log(JSON.stringify(event));
    }

  render() {
      return (
        <div>
        <p>The damn list.</p>
        <select onChange={()=>this.HandleChange(event)}>
          <option value="banana">Banana</option>
          <option value="orange">Orange</option>
          <option value="bread">Bread</option>
        </select>
        </div>
      );
    }
}

render(<App />, window.document.getElementById('app'));

If I do something similar in just plain HTML, my event is just fine. Same browser, same mouse and same clicking.

I would like to know what React is doing that's making Chrome see the event as a scripted change rather than a user change.

Other details:

Running on Windows via npm.

The events that React emits ARE scripted. React handles all native events internally and emits its own `SyntheticEvent` In turn. The native event can be accessed on the `nativeEvent` property. https://reactjs.org/docs/events.html — Lennholm, Mar 13 '18 at 17:37
Strange, i hace tried in this sandbox and it's working correctly https://codesandbox.io/s/1qk0x2v243 — giggi__, Mar 13 '18 at 17:42

score 1 · Answer 1 · answered Mar 13 '18 at 17:44

The event is not being passed to HandleChange from the arrow function correctly, you need to receive it as the first parameter and then pass like

onChange={(event)=>this.HandleChange(event)}

However a better way to do this is to bind the HandleChange function outside of render because a new function will be created each time render is called. Check this question How to avoid binding in render method

export default class App extends React.Component {
  HandleChange = (event) => { // use arrow function here
      console.log(JSON.stringify(event));
    }

  render() {
      return (
        <div>
        <p>The damn list.</p>
        <select onChange={this.HandleChange}>
          <option value="banana">Banana</option>
          <option value="orange">Orange</option>
          <option value="bread">Bread</option>
        </select>
        </div>
      );
    }
}

render(<App />, window.document.getElementById('app'));

score 0 · Answer 2 · answered Oct 21 '21 at 21:41

Incase you are experiencing this with React Native & Webview.

What worked for me.

I had a false false report. WebView logs {isTrusted: false} when the event data is from an "untrusted source". Even though the data is as expected.

console.log(data) // {isTrusted: false}

Ignoring the log and treating the data as expected (assuming the correct data was logged) worked for me.

React Event is always Istrusted:false

2 Answers2