Wie übergibt man einer Funktion als argument an eine ReactJS Komponente in Typoskript

Ich versuche, eine wiederverwendbare ReactJS button-Komponente und Hilfe brauchen, zu
übergeben Sie eine Funktion, um eine Komponente aus, und dann verwenden Sie es als ein click-Ereignis. Das click-Ereignis der Schaltfläche nicht funktioniert.

Hier ist der code, der die Komponente aufrufen:

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

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

Hier die Komponente, die ich bin versucht zu schreiben:

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.
InformationsquelleAutor Lambert | 2016-02-12
  1. 9
    <MyButton name="My Button" clickFunction={MyPublicFunction(1)} >

    Den Ausdruck MyPublicFunction(1) wird sofort aufgerufen, während die Bewertung der mit Ausdruck. Was Sie wollen, ist, um eine Funktion zu clickFunction:

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

    Beachten Sie, dass Sie eine Art Fehler, wenn du geschrieben hättest, so etwas wie dieses:

    interface myProps {
   name: string;
   clickFunction: () => void;
}
    • Gute Antwort. Ich wünschte nur, dass die syntax nicht so seltsam.
    InformationsquelleAutor Ryan Cavanaugh
  2. 2

    diese Methode funktioniert für mich:

    Den Eltern: 

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

    Kind:

    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>
   )
 }
}
    InformationsquelleAutor suku
Schreibe einen Kommentar