Javascript React onClick功能在装载时自动触发

我有一个包含基本onClick函数的组件

当组件渲染时（没有任何单击）调用该函数，为什么会发生这种情况

import React, { Component } from "react";
class Some extends Component {
  constructor(props) {
    super(props);
  }

  someFunc = (message) => {
    console.log(message)
  }


  render() {
    return (
       <p onClick={this.someFunc('hello')}>test</p>
     )
  }
}

import React，{Component}来自“React”；
类扩展某些组件{
建造师（道具）{
超级（道具）；
}
someFunc=（消息）=>{
console.log（消息）
}
render（）{
返回(
test
)
}
}

您不必像那样附加函数。您只需通过其他方式调用它：

<p onClick={() => this.someFunc('hello')}>test</p>

因为您需要传递一些

参数

，所以我提到的第一个参数就是您想要的参数

您可以阅读他们的文档以了解更多详细信息：

---

在React中，您需要传递未执行的函数，因此

onClick = {this.someFunction}

或者如果你需要通过一个论点

onClick = {() => this.someFunction('argument')}

---

原因是你写的

测试
而不是

测试
如果将
（）
放在那里，则函数将在渲染时立即调用，否则仅在单击时调用

试试这个箭头功能

this.someFunc（'hello'）}>测试
未经测试，但应以这种方式正确工作。
tl；dr：您在呈现类时调用的是this.someFunc（'hello'），而不是在调用onClick属性时。要解决此问题，应使用箭头函数，如下所示：

<p onClick={() => this.someFunc('hello')}>test</p>

this.someFunc（'hello'）}>测试

现在，如果你想知道为什么会发生这种情况，让我澄清一下你在做什么

import React, { Component } from "react";

class Some extends Component {
  constructor(props) {
    super(props);
  }

  // You define a class method that when called will in turn call the
  // console.log method, passing message as your argument.
  // message will equal 'hello' in your example.
  someFunc = (message) => {
    console.log(message)
  }

  // You define a render method of your class, react will 
  // automatically call this method on render.
  render() {

  // Your render method (which again is called automatically) will return
  // <p onClick={this.someFunc('hello')}>test</p>
  // let's see what operations you are performing in this JSX return.
    return (
       // You first define a paragraph html element to be rendered.
       // You then give your element an attribute called onClick.
       // But oh no! You are assigning onClick with the value of: 
       // this.someFunc('hello')
       //
       // That is not good, as what you are in effect saying is:
       // please call the method this.someFunc and pass a single argument: 'hello'
       // then assign the return of that method call to my property named onClick.
       // Therefore, every time you render this class, you are asking
       // javascript to call this function and get its value (which is undefined).
       // So while you think onClick is a function, it is not! it is only a value. 
       // A value which you are asking JavaScript to get for you on each render.
       // This is because in JS, when you write functionName(), 
       // you are literally calling the function at that moment.
       // See https://www.w3schools.com/js/js_function_invocation.asp
       <p onClick={this.someFunc('hello')}>test</p>

       // What you want to do instead is assign your onClick property
       // a function! Not a value! 
       // You want to write, "When I click here, do: this.someFunc('hello')"
       // to do that, you have some options, but the end goal will be the same
       // What you need to do is assign onClick a value, which when called (onClick)
       // will trigger your function! For instance:
       // onClick={() => this.someFunc('hello')}
       // Above we say "on each render, assign the onClick property a value which IS a function!"
       // This is, an unnamed arrow function!
       // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
       // Notice how we have defined an unnamed function that wraps our
       // this.someFunc('hello') and we have NOT
       // immediately called it (no parentheses following the wrapper function)
       // # outer function \() => #inner function \functionName()\ \ <-- No trailing parentheses.
       // Therefore, now the only way to execute your method named
       // this.someFunc('hello') is by calling its wrapper function.
       // And the only way to call that unnamed wrapper function?
       // By invoking your onClick property of your p element.
     )
  }
}

import React，{Component}来自“React”；
类扩展某些组件{
建造师（道具）{
超级（道具）；
}
//您定义了一个类方法，该类方法在被调用时将依次调用
//方法，将消息作为参数传递。
//在您的示例中，消息将等于“hello”。
someFunc=（消息）=>{
console.log（消息）
}
//定义类的呈现方法后，react将
//在渲染时自动调用此方法。
render（）{
//渲染方法（再次自动调用）将返回
//
test
//让我们看看您在这个JSX返回中执行的操作。
返回(
//首先定义要呈现的段落html元素。
//然后给元素一个名为onClick的属性。
//但哦，不！您正在为onClick赋值：
//this.someFunc（'hello'））
//
//这是不好的，因为你实际上说的是：
//请调用this.someFunc方法并传递一个参数：“hello”
//然后将该方法调用的返回分配给名为onClick的属性。
//因此，每次呈现这个类时，您都会问
//javascript调用此函数并获取其值（未定义）。
//所以，虽然您认为onClick是一个函数，但它不是！它只是一个值。
//在每次渲染时要求JavaScript为您获取的值。
//这是因为在JS中，当您编写functionName（）时，
//此时您实际上正在调用该函数。
//看https://www.w3schools.com/js/js_function_invocation.asp
test
//您要做的是分配onClick属性
//一个函数！不是一个值！
//您想写“当我单击此处时，执行：this.someFunc（'hello'）”
//要做到这一点，你有一些选择，但最终目标是相同的
//您需要做的是为onClick分配一个值，当调用该值时（onClick）
//将触发您的函数！例如：
//onClick={（）=>this.someFunc（'hello'）}
//上面我们说“在每个渲染上，为onClick属性指定一个值，该值是一个函数！”
//这是一个未命名的箭头函数！
//看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
//请注意，我们是如何定义一个未命名的函数来包装
//这是someFunc（'hello'），我们没有
//立即调用它（包装器函数后面没有括号）
//#外部函数\（）=>#内部函数\函数名（）\\这是我的荣幸
import React, { Component } from "react";

class Some extends Component {
  constructor(props) {
    super(props);
  }

  // You define a class method that when called will in turn call the
  // console.log method, passing message as your argument.
  // message will equal 'hello' in your example.
  someFunc = (message) => {
    console.log(message)
  }

  // You define a render method of your class, react will 
  // automatically call this method on render.
  render() {

  // Your render method (which again is called automatically) will return
  // <p onClick={this.someFunc('hello')}>test</p>
  // let's see what operations you are performing in this JSX return.
    return (
       // You first define a paragraph html element to be rendered.
       // You then give your element an attribute called onClick.
       // But oh no! You are assigning onClick with the value of: 
       // this.someFunc('hello')
       //
       // That is not good, as what you are in effect saying is:
       // please call the method this.someFunc and pass a single argument: 'hello'
       // then assign the return of that method call to my property named onClick.
       // Therefore, every time you render this class, you are asking
       // javascript to call this function and get its value (which is undefined).
       // So while you think onClick is a function, it is not! it is only a value. 
       // A value which you are asking JavaScript to get for you on each render.
       // This is because in JS, when you write functionName(), 
       // you are literally calling the function at that moment.
       // See https://www.w3schools.com/js/js_function_invocation.asp
       <p onClick={this.someFunc('hello')}>test</p>

       // What you want to do instead is assign your onClick property
       // a function! Not a value! 
       // You want to write, "When I click here, do: this.someFunc('hello')"
       // to do that, you have some options, but the end goal will be the same
       // What you need to do is assign onClick a value, which when called (onClick)
       // will trigger your function! For instance:
       // onClick={() => this.someFunc('hello')}
       // Above we say "on each render, assign the onClick property a value which IS a function!"
       // This is, an unnamed arrow function!
       // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
       // Notice how we have defined an unnamed function that wraps our
       // this.someFunc('hello') and we have NOT
       // immediately called it (no parentheses following the wrapper function)
       // # outer function \() => #inner function \functionName()\ \ <-- No trailing parentheses.
       // Therefore, now the only way to execute your method named
       // this.someFunc('hello') is by calling its wrapper function.
       // And the only way to call that unnamed wrapper function?
       // By invoking your onClick property of your p element.
     )
  }
}