反应把onChange放在 <div> ，将在 <input/> 在其中被改变

Question

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

为什么ondiv上的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>
        );
    }
}

当我使用{... others} = props时，我遇到了这个问题，“ onChange”函数包含在其他函数中，并放在一个div上，它使该组件两次调用onChange，并且我花费大量时间查找为什么。

Answer 1

这与React.js无关 。 这称为事件冒泡 。

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

在你的代码中

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