React.jsを使用して剣道uiデータソースをグリッドから呼び出す方法

Question

穏やかなWebサービスを呼び出すインラインデータソースを持つ剣道UIグリッドインスタンスがあります。

グリッドの "autoBind：false"プロパティを設定しました。これは、ページが読み込まれたときにデータをプルしたくないためです。

私は手動でdataSource.read（）メソッドをトリガしたいが、Reactの使い方は知らない。

私はwebpackを使用する自分の環境をセットアップするためにcreate-react-appを使用しています。

ボタンを押したときにGridsのdataSourceの読み取りメソッドをトリガーしたいと思います。

私は、データソースのreadメソッドを呼び出す必要があり

this.state.grid.ds.readを呼び出して試してみましたが、唯一のプロパティ値にアクセスしているようです。 GridオブジェクトまたはDataSourceオブジェクトの瞬間を取得して、read（）メソッドを呼び出してそのプロパティを参照できないようにする必要があるかどうかはわかりません。

私はread（）を試しましたが、読み込みがメソッドとして定義されていないと言うコンソールエラーが発生しました。以下

this.state.grid.ds.read()

参照するためのコードの抜粋である：

class App extends Component { 
     constructor(props) { 
     super(props); 
     this.state = { 
      gridOptions: { 
      autoBind: false, 
      dataSource: { 
       transport: { 
       read: { 
        url: "http://localhost:8080/students", 
        dataType: "json" 
       }, 
       parameterMap: function(options, operation) { 
        if (operation !== "read" && options.models) { 
        return { models: kendo.stringify(options.models) }; 
        } 
       } 
       }, 
       batch: true, 
       pageSize: 20, 
       schema: { 
       model: { 
        id: "id", 
        fields: { 
         id: { type: "string" }, 
         firstName: { type: "string"}, 
         lastName: { type: "string"}, 
         country: { type: "string" } 
        } 
       } 
       } 
      }, 
      pageable: true, 
      height: 550, 
      columns: [ 
       { field: "id", title: "Student/Teacher" }, 
       { field: "firstName", title: "First Name" }, 
       { field: "lastName", title: "Last Name" }, 
       { field: "country", title: "Country" }, 
       { command: ["edit", "destroy"], title: " ", width: "250px" } 
      ], 
      editable: "inline" 
      } 
     } 
     } 

     refreshDS(){ 
     this.state.grid.ds.read 
     } 

      render() { 
      return (
       <div className="App"> 
       <header className="App-header"> 
        <img src={logo} className="App-logo" alt="logo" /> 
        <h1 className="App-title">Welcome to React</h1> 
       </header> 
       <p className="App-intro"> 
       <button 
        onClick={this.refreshDS()}> 
        Refresh Grid 
       </button> 
       </p> 
       <br /> 
       <Grid 
        {...this.state.gridOptions} /> 
       </div> 
      ); 
      } 
     } 

任意の助けを理解されたいです。

Answer 1

親からの子反応コンポーネントへの参照を作成するときに使用できるwidgetInstanceがあります。

ここで親コンポーネントはAppクラス、子は< Grid />です。以下

サンプルコード：

<code> 
    class App extends Component { 
     constructor(props) { 
     super(props); 
    } 

    refreshDS(){ 
     this.child.widgetInstance.dataSource.read(); 
    } 
    ... 
    render() { 
     ... 
     <button 
     onClick={this.refreshDS()}> 
     Refresh Grid 
     </button> 
     </p> 
     <br /> 
     <Grid 
     ref={instance => {this.child = instance;}} 
     {...this.state.gridOptions} /> 
} 

</code> 

以下このスニペットは、剣道UI < Grid />構成要素に追加する必要が参照されます。ここでは、このについての詳細：https://reactjs.org/docs/refs-and-the-dom.html

ref={instance => {this.child = instance;}}

widgetInstance以下はあなたがで作業インスタンスオブジェクトです。 これは、AppコンポーネントのrefreshDS（）メソッドから呼び出されます。

this.child.widgetInstance.dataSource.read())

私はグリッドコンポーネントのインスタンスにアクセスし、DataSource.read（）メソッドを手動でトリガを引き起こすことができた親から子への参照をした後。