反應把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>