如何访问 React 组件实例的方法？

Question

有没有办法调用React组件内部定义的方法？

我理解我们通常希望通过 props/data 等以声明方式传递值。但是我正在使用一些具有内部有用方法的组件库。

例如

var field = <AutoComplete/>;
field.setValue("ready");  // doesn't work

例如这个方法 https://github.com/callemall/material-ui/blob/master/src/auto-complete.jsx#L244-L248

在 material-ui AutoComplete 组件中。

Answer 1

你不能用虚拟 dom 做这个，因为虚拟 dom 只是对要创建的组件的描述（实际组件实例只会在渲染时创建或更新）。

但是您可以在渲染后使用 refs:

访问您的 React 组件中的组件实例

var Test = React.createClass({
  getInitialState: function(){
    return {value:0};
  },
  setValue: function(value){
    this.setState({value:value});
  },
  render: function() {
    return <div>Value {this.state.value}</div>;
  }
});

var App = React.createClass({
  render: function() {
    return <div>
      <Test ref="test"/>
      <button onClick={()=>this.refs.test.setValue(1)}>1</button>
      <button onClick={()=>this.refs.test.setValue(2)}>2</button>
      <button onClick={()=>this.refs.test.setValue(3)}>3</button>
    </div>;
  }
});

var mountNode = document.getElementById('app');

ReactDOM.render(<App name="John" />, mountNode);

jsbin 上面的代码：http://jsbin.com/kitehujaje/1/edit?js,output

如何访问 React 组件实例的方法？

how to access methods of an instance of a React component?

reactjs

material-ui