Может onChange = {this.nameHandler} вызвать nameHandler = (событие) => {}

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

Рассмотрим второй пример

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

Здесь вы не вызываете исходную функцию.Вот только функция-обертка, которая возвращает другую функцию.Обработчики событий не влияют на возвращаемое значение.

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

Answer 2

Вы можете сохранить event.target.value в такой переменной, как эта

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

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

Answer 3

измените следующее для вызова функции onChange: this.nameHandler -> this.nameHandler()

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