反应.如何将道具从OnClick传递到功能

Question

我是新手。我正在尝试创建一个应用程序，可以单击一个按钮，并且一个函数将运行一个倒计时计时器，但是如果我从OnClick传递prop to is as y this，onClick = {begin（props.subject）}在我单击之前运行。而且，如果我使用onclick with bine nick nide grabs，则没有任何道具被传递给。

我该如何解决？

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);

另外，是否有一种方法或技巧可以使用外部功能内部功能内部的变量？因此，我可以在开始功能中制作一个暂停按钮以暂停seinterval。

Answer 1

您在此示例中使用函数（无状态）组件。您还可以使用ES6类来表示反应组件，其功能是类的方法。然后，您可以用代码中的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>
  );
};

简单，对吗？