反应。如何将道具从 onClick 传递到功能

Question

我是 React 的新手，我正在尝试创建一个应用程序，我可以在其中单击一个按钮，一个函数将运行倒数计时器，但是如果我从 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 函数内部的变量？所以我可以制作一个暂停按钮来暂停 begin 函数中的 seInterval。

Answer 1

您在此示例中使用的是功能性（无状态）组件。您还可以使用 ES6 classes 来表示 React 组件，函数是 class 的方法。然后，您可以在代码中将 begin 之类的函数作为 class 方法，这样它们就可以访问 class 数据成员，例如 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>
  );
};

很简单吧？

反应。如何将道具从 onClick 传递到功能

React. how to pass props from onClick to function

global-variables

onclick

connect

setinterval

reactjs