React入门系列教程（八）事件处理

有如下一个程序：

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    const state = {count: 0, text: ''}
    function App() {
        return (
            <div>
                <div>
                    按钮被点击了 {state.count} 次
                </div>
                <div>
                    <button>按钮</button>
                </div>
                <div>
                    你输入了：{state.text}
                </div>
                <div>
                    <input />
                </div>
            </div>
        )
    }
    
    function setState(newState) {
        Object.assign(state, newState)
        renderApp()
    }
    
    function renderApp() {
        ReactDOM.render(<App />, rootElement)    
    }
    renderApp()
</script>

每次我们调用setState函数，就会重新渲染页面，如果传入新值，就会渲染出新值。下面我们来实现实时显示按钮被点击的次数。

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    const state = {count: 0, text: ''}
    function App() {
        return (
            <div>
                <div>
                    按钮被点击了 {state.count} 次
                </div>
                <div>
                    <button onClick={() => setState({count: state.count + 1})}>按钮</button>
                </div>
                <div>
                    你输入了：{state.text}
                </div>
                <div>
                    <input />
                </div>
            </div>
        )
    }
    
    function setState(newState) {
        Object.assign(state, newState)
        renderApp()
    }
    
    function renderApp() {
        ReactDOM.render(<App />, rootElement)    
    }
    renderApp()
</script>

为onClick属性绑定一个函数，这里使用了箭头函数。并传入了新值，每次让state.count加1，从而实现了点击按钮次数计数。当然为了代码更清晰，可以把箭头函数提取出来成普通函数。还有很多其他事件，请自行查阅文档。

下面我们来实现输入框输入文字的同时在其他地方显示出来：

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    const state = {count: 0, text: ''}
    function App() {
        return (
            <div>
                <div>
                    按钮被点击了 {state.count} 次
                </div>
                <div>
                    <button onClick={() => setState({count: state.count + 1})}>按钮</button>
                </div>
                <div>
                    你输入了：{state.text}
                </div>
                <div>
                    <input onChange={event => setState({text: event.target.value})}/>
                </div>
            </div>
        )
    }
    
    function setState(newState) {
        Object.assign(state, newState)
        renderApp()
    }
    
    function renderApp() {
        ReactDOM.render(<App />, rootElement)    
    }
    renderApp()
</script>

这里使用到的是input元素的onChange事件，我们可以从event参数中拿到input元素输入时的值。

我们知道DOM事件也有event参数，和react的一样吗？在onChange事件中加一句console.log(event)看看究竟。我们发现这个event对象和DOM的并不一样，其中有一个属性叫做nativeEvent，根据名字我们也可以推测出这个属性才是原始的DOM事件对象，console.log(event.nativeEvent)看下，果然如此。