Question

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

App.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事件侦听器从主App组件传递了函数引用“ 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时，请确保道具包含可以通过以下代码检查的函数。

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

第二反应提供了onChange道具，它是一个函数，它检查您传递的道具的类型。如果您传递的不是函数，则会报错。

Answer 2

默认情况下，在JavaScript中对象的赋值和函数参数传递是通过引用传递来完成的，而函数在JavaScript中是对象。在分配或传递给函数时，只有原语会获得新的内存位置。

Answer 3

由于javascript是函数式编程语言，因此可以将函数作为参数传递给另一个函数。

在JavaScript包装器中实际包装实际事件，这也使react abstract可以使用。 React中更好的抽象可以帮助开发人员构建跨平台应用程序（例如Android的React Native，IOS应用程序和Electron来构建桌面应用程序）。

如果您喜欢以下代码

<input type="text" value={props.name} onChange={props.setNameFunction()}></input>

该功能将在渲染时执行，而不是在输入的onChange事件上执行。

但是，如果要在处理onChange事件时使用event对象，请尝试

<input type="text" value={props.name} onChange={(event) => props.setNameFunction(event)}></input>

希望它会对您有所帮助。谢谢。

Javascript如何知道何时隐式执行通过引用传递的函数？反应的例子

3 个答案: