Question

我有一个Kendo UI Grid实例，它有一个内联DataSource，可以调用RESTful Web服务。

我已经设置了Grid的"autoBind": false属性，因为我不想在页面加载时提取数据。

我想手动触发dataSource.read()方法，但不知道如何使用React。

我正在使用create-react-app来设置我的环境，它使用webpack。

我想在按下按钮时触发Grid的DataSource读取方法。

我试过调用this.state.grid.ds.read，它应该调用DataSource的read方法，但它似乎只访问属性值。我不确定是否需要获取Grid对象或DataSource对象的实例，以便我可以调用read（）方法而不引用该属性。

我尝试过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: "&nbsp;", 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>

下面的代码段是需要添加到Kendo UI < Grid />组件的引用。有关此内容的更多信息，请访问：https://reactjs.org/docs/refs-and-the-dom.html

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

下面的 widgetInstance 是您使用的实例对象。这是从App组件的refreshDS（）方法调用的。

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

一旦我从父级对子进行了引用，我就能够访问Grid组件的实例并导致手动触发DataSource.read（）方法。

如何使用React.js调用从网格读取的kendo ui数据源

1 个答案: