时间戳

首页 > 解决方案 > onChange = {this.nameHandler} 可以调用 nameHandler = (event) =>{}

javascript - onChange = {this.nameHandler} 可以调用 nameHandler = (event) =>{}

问题描述

以下是有效的代码片段，

状态-

state = {
        name : '',
        age : ''
    }

onChangeHandler-

nameHandler = (event) =>{
        this.setState({name: event.target.value});
    }

用户界面-

<input type = "text" onChange = {this.nameHandler} value = {this.state.name}/>

但是为什么以下不起作用？

状态-

state = {
        name : '',
        age : ''
    }

onChangeHandler-

nameHandler = (event) =>{
        this.setState({name: event.target.value});
    }

用户界面-

<input type = "text" onChange = {(event) =>this.nameHandler} value = {this.state.name}/>

甚至以下，

state = {
        name : '',
        age : ''
    }

onChangeHandler-

nameHandler(event){
        this.setState({name: event.target.value})
    }

用户界面-

<input type = "text" onChange = {(event) =>this.nameHandler} value = {this.state.name}/>

我理解我提出问题的原因是缺乏箭头函数理论知识。

请分享详细原因

标签： javascriptreactjsecmascript-6arrow-functionseventhandler

解决方案

考虑第二个例子

<input type = "text" onChange = {(event) =>this.nameHandler} value = {this.state.name}/>

在这里，您没有调用原始函数。这只是一个包装函数，它返回另一个函数。事件处理程序不受返回值的影响。

<input type = "text" onChange = {(event) =>this.nameHandler(event)} value = {this.state.name}/>

推荐阅读