2

React コンポーネントが内部で定義するメソッドを呼び出す方法はありますか?

一般的に、props/data などを使用して宣言的に値を渡したいことは理解していますが、内部の便利なメソッドを持ついくつかのコンポーネント ライブラリを使用しています。

例えば

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

たとえば、このメソッド https://github.com/calleall/material-ui/blob/master/src/auto-complete.jsx#L244-L248

material-ui AutoCompleteコンポーネントで。

4

1 に答える 1

4

仮想 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

于 2015-12-21T01:57:20.640 に答える