反应。如何将 props 从 onClick 传递到 function

我是反应新手。我正在尝试创建一个应用程序，在其中我可以单击按钮，并且函数将运行倒计时器，但是如果我从 onClick 传递道具来开始像这样的函数， onClick={begin(props.subject)} 该函数将在我点击之前运行。如果我在不带参数的情况下将 onClick 与 begin 一起使用，则不会传递任何道具。

我该如何解决这个问题？

import React from 'react';
import SubjectForm from './SubjectForm';

const EditSubject=(props)=>{
    return(
        <div>
        <button onClick={begin}>start</button>
        </div>)
};

const begin = (props)=> {
   console.log(props.subject)
}

const mapStateToProps=()=>{};

export default connect(mapStateToProps)(EditSubject);

另外，是否有一种方法或技巧可以从外部函数使用 begin 函数内部的变量？所以我可以在开始函数中创建一个暂停按钮来暂停 setInterval 。

您在此示例中使用功能（无状态）组件。您还可以使用 ES6 类来表示 React 组件，其中函数是类的方法。然后你可以制作类似的函数begin在代码中作为类方法，这样它们就可以访问类数据成员，例如props.
请参阅下面的代码：

import React from 'react';
import SubjectForm from './SubjectForm';

class EditSubject extends React.Component {
  constructor() {
    super();
    this.begin = this.begin.bind(this);
  }
  begin() {
     console.log(this.props.subject);
  }
  render() {
    return (
        <div>
          <button onClick={begin}>start</button>
        </div>
    );
  }
};

const mapStateToProps=()=>{};

export default connect(mapStateToProps)(EditSubject);

如果您的组件具有状态和方法，这只是最佳实践。使用像您的示例中那样的功能组件，您可以简单地使用以下内容：

const EditSubject = (props) => {
  return (
    <div>
      <button
        onClick={() => begin(props)}  // using props here
      >
        start
      </button>
    </div>
  );
};

很简单，对吧？