javascript - 在 Reactjs 中停止事件传播

Question

我正在尝试创建一个父子组件。就我而言，子组件<Person/>具有包装器div和input元素。我对配置的div和更改事件有一个点击事件input。

我需要点击事件来删除这个人，而当我输入输入时，它应该更新名称。出于某种原因，当我开始在输入字段中输入时，这两个事件都会被触发。preventDefault()我尝试使用and取消事件，stopPropagation()但不起作用。任何帮助将不胜感激。

请找到下面的演示代码。

(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>

标签： javascriptreactjs

Answer 1

我相信你应该只需要停止在onClick输入元素的处理程序中传播。这是否按预期工作？

(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>