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

Question

下面是有效的代码片段，

状态-

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

onChangeHandler-

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

UI-

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

但为什么以下不起作用？

状态-

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

onChangeHandler-

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

UI-

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

连下面的都没有，

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

onChangeHandler-

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

UI-

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

我明白我的问题是缺乏箭头函数理论知识。

请分享详细原因

Answer 1

更改如下以调用函数 onChange: this.nameHandler --> this.nameHandler()

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

Answer 2

考虑第二个例子

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

这里你调用的不是原来的函数。这只是一个包装函数，return 是另一个函数。事件处理程序不受 return 值的影响。

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

Answer 3

您可以将 event.target.value 存储在这样的变量中

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

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

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

Can onChange = {this.nameHandler} invoke nameHandler = (event) =>{}

javascript

ecmascript-6

reactjs

eventhandler

arrow-functions