React.js를 사용하여 kendo ui 데이터 소스를 그리드에서 호출하는 방법

Question

안정적인 웹 서비스를 호출하는 인라인 DataSource가있는 Kendo UI Grid 인스턴스가 있습니다.

페이지가로드 될 때 데이터를 가져 오지 않으므로 Grid의 "autoBind : false"속성을 설정했습니다.

수동으로 dataSource.read() 메소드를 트리거하고 싶지만 React를 사용하는 방법을 모른다.

나는 webpack을 사용하는 환경을 설정하기 위해 create-react-app를 사용하고 있습니다.

단추를 누를 때 Grids dataSource 읽기 메서드를 트리거하고 싶습니다.

내가 전화 시도 데이터 소스의 읽기 메소드를 호출하지만, 단지 속성 값에 액세스 할 것으로 보인다해야

this.state.grid.ds.read. Read() 메서드를 호출하고 속성을 참조 할 수 없도록 Grid 객체 또는 DataSource 객체의 인스턴스를 가져와야하는지 잘 모르겠습니다.

나는 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> 

아래 니펫 검도 < Grid /> UI 요소에 추가되어야하는 기준이다. 여기에 대한 자세한 : https://reactjs.org/docs/refs-and-the-dom.html

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

widgetInstance 아래 함께 작업 인스턴스 개체입니다. 이것은 App 구성 요소의 refreshDS() 메소드에서 호출됩니다.

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

나는 그리드 구성 요소의 인스턴스에 액세스하고 DataSource.read() 메소드의 수동 트리거를 야기 할 수있었습니다 부모의 자녀에 대한 참조를 만든 후.