web-dev-qa-db-fra.com

Comment passer une fonction comme argument à un composant ReactJS dans TypeScript

J'essaie de créer un composant de bouton ReactJS réutilisable et j'ai besoin d'aide pour passer une fonction à un composant, puis l'utiliser comme événement de clic. L'événement de clic sur le bouton ne fonctionne pas.

Voici le code qui appellera le composant:

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

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

Voici le composant que j'essaie d'écrire:

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.
reactjstypescript
18
Lambert
<MyButton name="My Button" clickFunction={MyPublicFunction(1)} >

L'expression MyPublicFunction(1) est immédiatement invoquée lors de l'évaluation de l'expression contenant. Ce que vous voulez, c'est fournir une fonction à clickFunction:

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

Notez que vous obtiendrez une erreur de type si vous aviez écrit quelque chose comme ceci:

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

cette méthode a fonctionné pour moi:

Le parent:

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

L'enfant:

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>
   )
 }
}
2
suku