javascript - Javascript 如何知道何时执行通过引用隐式传递的函数？ react 示例

Question

在我的 React 示例应用程序中，我通过引用将函数“manipulateUsername”作为事件监听器传递给另一个较小的组件。

应用程序.js:

import React, { Component } from 'react';
import './App.css';
import UserInput from './components/UserInput';
import UserOutput from './components/UserOutput';

class App extends Component {
  state = {
    username: "Max",
    age: 30
  }    

  manipulateUsername = (event) => {
    this.setState({
      username: event.target.value
    })
  }

  render() {
    return (
      <div className="App">
        <UserOutput name="Jenny" age="32"></UserOutput>        
        <UserOutput name={this.state.username} age={this.state.age}></UserOutput>        
        <UserInput setNameFunction={this.manipulateUsername} name={this.state.username}></UserInput>

      </div>
    );
  }
}

export default App;

在我的 UserInput.js 中，onChange 事件监听器从主应用程序组件传递函数引用“manipulateUsername”。

import React from 'react';
import './UserInput.css';


const userInput = (props) => {
    return (
        <div className="UserInput" >
            <input type="text" value={props.name} onChange={props.setNameFunction}></input>
        </div>
    )
}

export default userInput;

这听起来可能是一个愚蠢的问题，但是 onChange() 函数实际上如何“知道”它已获得作为引用传递的函数，以及它如何自动执行该函数？因为我没有像用括号那样调用这段代码中的函数:

onChange={props.setNameFunction()}

相反，我只是将函数保留原样..？ onChange={props.setNameFunction}

其次，我想知道，javascript如何设法将值隐式“传递”给其他函数，例如在app.js“manipulateUser”函​​数中，它总是传递一个事件参数(如果我离开我想，出这个参数)。这在幕后是如何运作的？因为在 onChange 函数中，我正在调用我的函数，但我从未将该事件参数传递给它，那么它是如何工作的？

Answer 1

当您将函数传递给 onChange 以确保 props 包含可以通过以下代码检查的函数时。

onChange={typeof props.setNameFunction === "function"? props.setNameFunction : () => {}}

其次，react 提供了 onChange prop，它是一个函数，它检查您传递的 props 的类型。如果你传递的不是函数，它会给出错误。