Question

我是React的新手，我正在尝试创建一个应用程序，我可以点击一个按钮，一个函数将运行倒数计时器，但是如果我从onClick传递道具来开始这样的函数，onClick = {begin（ props.subject）}函数将在我单击之前运行。如果我使用带有begin而没有参数的onClick，则没有传递道具。我该如何解决这个问题？谢谢

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函数内部的变量？所以我可以制作一个暂停按钮来暂停开始功能中的seInterval。

Answer 1

在此示例中，您正在使用功能（无状态）组件。您还可以使用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)}>start</button>  // passing props here
        </div>)
};

简单，对吧？

反应。如何将onClick中的道具传递给函数

1 个答案: