web-dev-qa-db-ja.com

Reactで関数を呼び出す

私はReactの初心者ですが、Reactで関数を呼び出すことについて少し混乱しています。

私は次の方法を見ましたが、それぞれをいつどの方法で使用するかわかりません。

  • _handleAddTodo ={this.handleAddTodo}_
  • handleAddTodo ={this.handleAddTodo()}
  • _handleAddTodo ={handleAddTodo}_
  • _handleAddTodo ={this.handleAddTodo}_
  • handleAddTodo ={handleAddTodo()}

これらは交換可能ですか？関数を呼び出すのと同じ方法で、イベントを処理するためにそれを行うことができますか？

javascriptreactjsjsxdom-events
4
Anyname Donotcare

ES6では、通常の関数または矢印関数を使用できます。

Function1（通常の関数）

functionA(){
   //Something here
}

次にthis.functionA（）を呼び出す必要があります

Function2（ArrowFunction）

functionA = () => {
   //SomeThing Here
}

次にthis.functionAを呼び出す必要があります

* Function3（例：Reactの定数）*

const A = (functionTest) =>{
  return (
     <div>{functionTest}</div>
    );
}

functionTestはReact :)のmapStateToPropsです

参考になれば幸いです。

1
Voi Mập

これは正しいです-> _handleAddTodo ={this.handleAddTodo}_子コンポーネントに関数を渡すとき、このように関数をバインドする必要がありますhandleAddTodo ={this.handleAddTodo.bind(this)}。以下のコードはあなたの疑問を解決するのに役立ちます。

簡単な例

_import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState() {
      this.setState({data: 'Data updated...'})
   }

   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}

export default App;
_

子イベント

_import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);
   };

   updateState() {
      this.setState({data: 'Data updated from the child component...'})
   }

   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}

class Content extends React.Component {

   render() {
      return (
         <div>
            <button onClick = {this.props.updateStateProp.bind(this)}>CLICK</button>
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}

export default App;
_

ここを参照

1
vnomvk

this.props.someProps()を使用してイベントをトリガーできます。次のサンプルを確認してください。

import React, { Component } from 'react';    

class AddToDo extends Component {
   render() {
      return (
         <button onClick={ev => this.props.handleAddToDo(ev, 'hello')}>
            {this.props.title}
         </button>
      )
   }
}

class Todos extends Component {
   handleAddToDo(ev, someVal) {
      // do something
   }

   render() {
      return (
         <AddToDo title="Add" handleAddToDo={(ev, someVal) => this.handleAddToDo(ev, someVal)} />
      )
   }
}

export default Todos;
1
Abraham Gnanasingh

関数を呼び出すには、（）を追加する必要があります

{this.handleAddTodo()}

イベントの処理について- Handling＃Events

矢印関数- Functions＃ArrowFunctions

1
fauster01