渲染时如何使用onClick答案

【问题标题】：how to use onClick when it renders渲染时如何使用onClick
【发布时间】：2020-07-30 08:39:18
【问题描述】：

我对反应还很陌生，想知道如何更改下面的代码，以便为每个部分标记使用 onClick 函数。

render(){
        return(
            <div className='App'>
                < Header /> 

                <div className="secHeader"><h2>General Education Core</h2></div>
                <br/>

                {/* Displays the 6 different gen eds cateogry that uic offers and calls the displaygenEdCourse component and sends props to know which item was clicked */}
                <div className="box alt container">
                    {/* link for Analyzing the Natural World */}
                    <section className="feature left">
                        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'ANW' }}} className="image icon solid fa-seedling"><img src={pic01} alt="pic01" /></Link>
                        <div className="content">
                            <h3>Analyzing the Natural World</h3>
                        </div>
                    </section>
                    {/* link for Understanding the Individual and Society */}
                    <section className="feature right">
                        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'UIS' }}} className="image icon solid fa-users"><img src={pic01} alt="pic01" /></Link>
                        <div className="content">
                            <h3>Understanding the Individual and Society</h3>
                        </div>
                    </section>
                    {/* link for Understanding the Past */}
                    <section className="feature left">
                        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'UP' }}} className="image icon solid fa-history"><img src={pic01} alt="pic01" /></Link>
                        <div className="content">
                            <h3>Understanding the Past</h3>
                        </div>
                    </section>
                    {/* link for Understanding the Creative Arts */}
                    <section className="feature right">
                        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'UCA' }}} className="image icon solid fa-palette"><img src={pic01} alt="pic01" /></Link>
                        <div className="content">
                            <h3>Understanding the Creative Arts</h3>
                        </div>
                    </section>
                    {/* link for Exploring World Cultures */}
                    <section className="feature left">
                        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'EWC' }}} className="image icon solid fa-globe"><img src={pic01} alt="pic01" /></Link>
                        <div className="content">
                            <h3>Exploring World Cultures</h3>
                        </div>
                    </section>
                    {/* link for Understanding U.S. Society */}
                    <section className="feature right">
                        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'UUS' }}} className="image icon solid fa-flag-usa"><img src={pic01} alt="pic01" /></Link>
                        <div className="content">
                            <h3>Understanding U.S. Society</h3>
                        </div>
                    </section>
                </div>

                < Footer />

            </div>
        )
    }

每个部分标记都是我希望能够单击的块/图像，当我单击它时，它应该调用 onClick 函数，以便我通知单击了哪个部分。我尝试将 onClick 放在像<section className="feature left" onClick={console.log('testing')}> 这样的部分标签内。还尝试将 onClick 放置在每个部分标签的其他位置，但它似乎不起作用。每当页面呈现时，都会调用 onClick，然后当我单击该图像时，它不会调用 onClick。不知道哪里出错了。

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

onClick 回调接受一个函数，所以类似于onClick={() => console.log('testing')}。按原样，您正在调用您想要稍后而不是立即执行的内容。

<section
  className="feature left"
  onClick={() => console.log('testing')}
>
  ...

也可以是函数

 <section
  className="feature left"
  onClick={function() {
    console.log('testing');
  }}
>
  ...

或者两者都在外部定义，注意这里你直接传递函数，没有括号。

 const clickHandler = () => console.log('testing');

 <section
  className="feature left"
  onClick={clickHandler}
>
  ...

【讨论】：

【解决方案2】：

你必须把它写成箭头函数，以免被立即调用：

<section className="feature left" onClick={() => console.log('testing')}>

【讨论】：

【解决方案3】：

你很接近，但 onClick 需要一个函数。请改用onClick={() => console.log('testing')}。

这里微妙但重要的区别是，你所拥有的相当于：

// handler is undefined because console.log doesn’t return anything
const handler = console.log(‘testing’);

// handler isn’t a function, so this doesn’t work 
<section onClick={handler}> ... </section>

【讨论】：

【解决方案4】：

那是因为当您编写“console.log('testing')”时，您正在调用组件渲染上的函数。为了使用您的点击，您需要创建一个调用 console.log 的函数。所以正确的语法是：

<section className="feature left" onClick={() => console.log('testing')}>

【讨论】：

【解决方案5】：

您错误地调用了 onClick。如果你想直接在 onClick 内部调用函数，你需要传递一个匿名函数。例如，请参阅下面的 ES6 语法：

class SomeComponent extends React.Component {
  constructor stuff...

  render() {
    return() {
      <section className="feature left" onClick={() => console.log('testing')}>
        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'EWC' }}} className="image icon solid fa-globe"><img src={pic01} alt="pic01" /></Link>
        <div className="content">
          <h3>Exploring World Cultures</h3>
        </div>
      </section>
    }
  }
}

或者，您也可以在渲染方法之外创建箭头函数并直接使用它：

class SomeComponent extends React {
  constructor stuff...

  onSectionClick = () => {
    console.log('testing');
  };

  render() {
    return() {
      <section className="feature left" onClick={onSectionClick}>
        <Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'EWC' }}} className="image icon solid fa-globe"><img src={pic01} alt="pic01" /></Link>
        <div className="content">
          <h3>Exploring World Cultures</h3>
        </div>
      </section>
    }
  }
}

【讨论】：