Javascript 在React.js中，为什么不'；我们是否必须传递参数事件处理函数？

例如，在渲染REACT组件中，如果需要传入一个参数，它将如下所示：

<button onClick={() => this.doSomething(**passed in parameter**)}>Press me!</button>

this.doSomething（**传入参数**）}>按我！

这个很好用。但是，为什么不必首先将其作为fat-arrow函数中的参数进行澄清呢？像这样：

<button onClick={(**PARAMETER PASSED IN HERE FIRST**) => this.doSomething(**SAME PARAMETER PLACED HERE**)}>Press me!</button>

this.doSomething（**此处放置的参数相同**）}>按我！

请参阅：

/（a，b）是由`Component`传递给`onClick`处理程序的参数。
这个.doSomething（d）}/>
//简单类示例
类应用程序扩展了React.Component{
剂量=（a，b）=>{
console.log（'a'，a，'b'，b）；
}
render（）{
//onClick={this.doSomething}
返回此。doSomething（a，b）}/>
}
}
类组件扩展了React.Component{
酷点击=（）=>{
this.props.doSomething（'hello'，'world'））
}
render（）{
返回活性剂量测定法
}
}

//d是当前作用域中可用的参数
这个。doSomething（d）}
//可能作用域的简单示例
从“/consts”导入{d}
常数d=5；
类应用程序扩展了React.Component{
doSomething=（x）=>{
console.log（'x'，x）；
}
render（）{
常数d=5；
返回此。doSomething（d）}/>
}
}

因为您的参数是全局范围的？请记住，JSX是JavaScript的超集，所以同样的规则也适用，在顶部添加了一些语法！是的，通常应该使用

（event）=>this.doSomething（event，additionalArguments）

。但是如果你的

doSomething

不在乎，你当然可以忽略它。感谢@bergi提供的信息，这对我们来说很有意义！但是为了进一步澄清，在这个例子中：

{this.state.letters.map（letter=>
this.handleClick（letter）}>{letter}
）}

难道您不能在arrow函数中作为参数传递“letter”参数吗，这个.handleClick应该知道它是什么，因为它是传入的？B/c我的困惑是，fat arrow中的函数应该需要知道它所使用的变量是什么，是从实际的arrow函数参数传入的。@Brianiswiston我不明白您的困惑是什么，您在代码段中谈论的两个arrow函数中的哪一个，以及它是否按预期为您工作。@Bergi我指的是onClick函数。因为有一个变量“letter”来自外部的map函数，所以似乎您必须在onClick fat arrow函数中传入“letter”作为参数，以便该.handleClick（letter）能够使用它。尽管文档明确说明您不需要传入参数，但我只想为自己澄清一下。@BrianisWinston否。正如您所说，它来自外部（通过），而不是来自

onClick

的参数。这意味着可以无参数调用

onClick（）

（它使用

map

回调参数中的

字母

）——如果您将其声明为参数，那么

onClick（…）

的调用方将需要提供值，而这不是我们在这里想要的。

// (a,b) are parameters passed by `Component` to `onClick` handler.
<Component onClick={(a,b) => this.doSomething(d)}/>

// Simple class example
class App extends React.Component {

  doSomething = (a,b) => {
    console.log('a',a,'b',b);
  }

  render() {
//                    onClick={this.doSomething}
    return <Component onClick={(a,b) => this.doSomething(a,b)}/>
  }
}

class Component extends React.Component {

  coolClick = () => {
    this.props.doSomething('hello','world')
  }

  render() {
    return <button onClick={this.coolClick}>Active doSomething</button>
  }
}

// d is a parameter available in the current scope
<Component onClick={() => this.doSomething(d)}

// Simple examples of possible scopes
import { d } from './consts'

const d = 5;

class App extends React.Component {

  doSomething = (x) => {
    console.log('x',x);
  }

  render() {
    const d = 5;
    return <Component onClick={() => this.doSomething(d)}/>
  }
}