Question

我正在尝试制作一个可重用的ReactJS按钮组件，并需要有关如何使用的帮助将函数传递给组件，然后将其用作单击事件。按钮上的单击事件无效。

以下是调用组件的代码：

export var MyPublicFunction = function (inArg: number) {
    alert(inArg);
}

ReactDOM.render(<MyButton name="My Button" clickFunction={MyPublicFunction(1)} >Button</MyButton>, document.getElementById('content'));

这是我试图写的组件：

interface myProps {
   name: string;
   clickFunction: any
}

class MyButton extends React.Component<myProps, {}> {

    constructor(props: myProps) {
        super(props);
    }

    render() {
        return (<div>
            <button ref="btn1"  onClick={this.props.clickFunction} >
                {this.props.name}
             </button>
        </div>);
    } //end render.
} //end class.

Answer 1

<MyButton name="My Button" clickFunction={MyPublicFunction(1)} >

在评估包含表达式时，会立即调用表达式MyPublicFunction(1)。你想要的是向clickFunction提供功能：

<MyButton name="My Button" clickFunction={() => MyPublicFunction(1)} >

请注意，如果你写了类似的东西，你会得到一个类型错误：

interface myProps {
   name: string;
   clickFunction: () => void;
}

Answer 2

这种方法对我有用：

父母：

 class App extends React.Component<Props, State> {
   greet() {
    alert('Hello!')
   }
   render() {
      return (
       <div className="col-xs-10 col-xs-offset-1">
        <Home greet={this.greet}/>
       </div>
     ) 
   }
}

孩子：

interface Props {
  greet: () => void
}

export class Home extends React.Component<Props, State> {
 constructor(props: any) {
   super(props)
 }

 render() {
   return (
    <button className="btn btn-warn" onClick={this.props.greet}>Greet</button>
   )
 }
}

如何将函数作为参数传递给TypeScript中的ReactJS组件

2 个答案: