您可以利用
refs以达到结果
class Parent extends React.Component { handleClick = () => { this.refs.child.refs.myInput.focus(); } render() { return ( <div> <Child ref="child"/> <button onClick={this.handleClick.bind(this)}>focus</button> </div> ) }}class Child extends React.Component { render() { return ( <input type="text" ref="myInput"/> ) }}ReactDOM.render(<Parent/>, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="app"></div>更新:
React docs建议使用
ref callback而不是
string refs
class Parent extends React.Component { handleClick = () => { this.child.myInput.focus(); } render() { return ( <div> <Child ref={(ch) => this.child = ch}/> <button onClick={this.handleClick.bind(this)}>focus</button> </div> ) }}class Child extends React.Component { render() { return ( <input type="text" ref={(ip)=> this.myInput= ip}/> ) }}ReactDOM.render(<Parent/>, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="app"></div>


