在 Reactjs 中停止事件传播

Question

I am trying to create a parent and child component. The child component, in my case, <Person/> has a wrapper div and input element. I have a click event for the div and change event for the input configured.

I need the click event to delete the person, whereas when I type in the input, it should update the name. For some reason, both the events are fired when i start typing in the input field. I tried cancelling the event using preventDefault() and stopPropagation() but does not work. Any help would be appreaciated.

Please find the below demo code.

 (function () { class Person extends React.Component { render() { return ( <div onClick={this.props.onClickParent}> <h1>{this.props.name}: {this.props.age}</h1> <input value={this.name} onChange={this.props.onNameChange} onFocus={ ev => { ev.preventDefault(); ev.stopPropagation(); ev.nativeEvent.stopImmediatePropagation(); ev.nativeEvent.preventDefault(); ev.nativeEvent.stopPropagation(); this.props.onNameChange(); } } /> </div> ) } } class App extends React.Component { state = { people: [{ age: 36, id: 1, name: 'Jon' }, { age: 28, id: 2, name: 'Bob' }], } onNameChange() { console.log('onNameChange') } onClickParent() { console.log('onClickParent') } render() { return ( <div> { this.state.people.map(person => { return ( <Person name={person.name} age={person.age} key={person.id} onClickParent={this.onClickParent} onNameChange={this.onNameChange} /> ) }) } </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); })();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 1

I believe you should just have to stop propagation in the onClick hander of the input element. Does this work as intended?

 (function () { class Person extends React.Component { render() { return ( <div onClick={this.props.onClickParent}> <h1>{this.props.name}: {this.props.age}</h1> <input value={this.name} onChange={this.props.onNameChange} onClick={e => { e.stopPropagation() }} onFocus={ ev => { this.props.onNameChange(); } } /> </div> ) } } class App extends React.Component { state = { people: [{ age: 36, id: 1, name: 'Jon' }, { age: 28, id: 2, name: 'Bob' }], } onNameChange() { console.log('onNameChange') } onClickParent() { console.log('onClickParent') } render() { return ( <div> { this.state.people.map(person => { return ( <Person name={person.name} age={person.age} key={person.id} onClickParent={this.onClickParent} onNameChange={this.onNameChange} /> ) }) } </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); })();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

Stopping event propagation will work only for the same event. In your case - the onClick event.

You can add a new onClick event on the input element and stop the propagation there:

 (function () { class Person extends React.Component { render() { return ( <div onClick={this.props.onClickParent}> <h1>{this.props.name}: {this.props.age}</h1> <input value={this.name} onChange={this.props.onNameChange} onClick={e=>e.stopPropagation()} onFocus={ ev => { ev.preventDefault(); ev.stopPropagation(); ev.nativeEvent.stopImmediatePropagation(); ev.nativeEvent.preventDefault(); ev.nativeEvent.stopPropagation(); this.props.onNameChange(); } } /> </div> ) } } class App extends React.Component { state = { people: [{ age: 36, id: 1, name: 'Jon' }, { age: 28, id: 2, name: 'Bob' }], } onNameChange() { console.log('onNameChange') } onClickParent() { console.log('onClickParent') } render() { return ( <div> { this.state.people.map(person => { return ( <Person name={person.name} age={person.age} key={person.id} onClickParent={this.onClickParent} onNameChange={this.onNameChange} /> ) }) } </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); })();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 3

Another way is to check the target (if you don't want to add an extra handler for your input).

  onClickParent(e) {
    if (e.target.tagName !== "INPUT") {
      console.log("onClickParent");
    }
  }

Also you can simply have your input outside of your div. (you might have your reasons for putting it inside.... just wanted to mention this...)