Question

下面的代码，当我在输入中输入文本时，onChange函数将运行。

为什么div上的onChange可以运行？我在哪里可以找到关于此的文档？

class App extends Component {
    render() {
        return (
            <div className="App">
                <GiantInput onChange={(e) => console.log('giant onChange', e.target)}/>


                <div onChange={(e) => {
                    console.log('change!', e);
                }}>
                    输入2：<input style={{width: '50%', 'border-color': 'black'}}/>
                </div>
            </div>
        );
    }
}

当我使用{...其他} =道具时，我遇到了这个问题，＆＃34; onChange＆＃34;函数包含在其他函数中，并放在div上，它使组件调用onChange两次，并且我花了很多时间来查找原因。

Answer 1

这不是关于 React.js 。它被称为 Event Bubbling 。

使用e.stopPropagation()停止事件冒泡。

在您的代码中

<div onChange={e =>console.log('change!', e)}>
      输入2: <input onChange={e => e.stopPropagation()} 
                 style={{width: '50%', 'border-color': 'black'}}/>
</div>

在<div>上放置onChange，当其中的<input />被更改时将被触发

1 个答案: