React中的事件

事件

---

注意：

事件是需要采用驼峰命名法 on 开头，例如：onClick={事件要绑定一个函数}

箭头函数

<div id="root"></div>

<script type="text/babel">
    // 事件是需要采用驼峰命名法 on开头：onClick.事件要绑定一个函数
    ReactDOM.render((
        <div>
            <input type="button" value={"箭头函数"} onClick={(e) => {
                console.log(e); // 事件函数
                console.log('gml')
            }}/>
        </div>
    ), document.querySelector("#root"));
</script>

普通函数

<div id="root"></div>

<script type="text/babel">
    // 事件是需要采用驼峰命名法 on开头：onClick.事件要绑定一个函数
    function fn(e) {
    // 第 1 个参数 e ，为事件对象
        console.log(e.target.value);
    }
    ReactDOM.render((
        <div>
            <input type="button" value={"function 函数"} onClick={fn}/>
        </div>
    ), document.querySelector("#root"));
</script>

事件 function 函数 传值

• 绑定 bind() 传值
• 函数接收的参数 与 bind 绑定的参数列表相等时，没有事件对象 e
• 函数接收的参数 比 bind 绑定的参数列表多 1 个时，多出的 1 个参数为 e 对象
• 函数接收的参数 比 bind 绑定的参数列表多 多个时，多出的 1 个参数为 e 对象，更多的为 undefined

<div id="root"></div>

<script type="text/babel">
    // 事件是需要采用驼峰命名法 on开头：onClick.事件要绑定一个函数
    
    // 最后 1 个参数是事件对象
    function fn(a, b, c, d) {
        console.log(a, b, c, d.target.value);
    }

    ReactDOM.render((
        <div>
            <input type="button" value={"传值"} onClick={fn.bind(this, 1, 2, 3)}/>
        </div>
    ), document.querySelector("#root"));
</script>

事件 箭头函数传值

<div id="root"></div>

<script type="text/babel">
    // 事件是需要采用驼峰命名法 on开头：onClick.事件要绑定一个函数
    function fn(a, b, c, d) {
        console.log(a, b, c, d.target.value);
    }

    ReactDOM.render((
        <div>
            <input type="button" value={"传值"} onClick={(e) => {
               // 调用函数传值
                fn2(1, 2, 3, e);
            }}/>
        </div>
    ), document.querySelector("#root"));