함수를 변수로 반응에 전달하는 방법TypeScript의 JS 구성 요소

함수를 변수로 반응에 전달하는 방법TypeScript의 JS 구성 요소

재사용 가능한 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.

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

그 표현은MyPublicFunction(1)포함하는 식을 평가하는 동안 즉시 호출됩니다.당신이 원하는 것은 기능을 제공하는 것입니다.clickFunction:

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

다음과 같은 내용을 작성한 경우 유형 오류가 발생합니다.

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

이 방법은 나에게 효과가 있었습니다.

상위 항목:

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

언급URL : https://stackoverflow.com/questions/35369013/how-to-pass-a-function-as-an-argument-to-a-reactjs-component-in-typescript