时间戳

首页 > 解决方案 > Javascript 如何知道何时隐式执行通过引用传递的函数？反应示例

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

问题描述

在我的 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 事件侦听器从主 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-function 中，我正在调用我的函数，但我从来没有将那个事件参数传递给它，那么它是如何工作的呢？

标签： javascriptreactjsevent-handlingpass-by-reference

解决方案

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

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

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

推荐阅读