子コンポーネントにある入力フィールドにフォーカスする方法

Question

親コンポーネントにボタンがあります。子コンポーネントにある入力フィールドに、そのボタンをクリックしてフォーカスを合わせたいと思います。私はどうすればそれをすることができます。

Answer 1

あなたは結果を達成するために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>

UPDATE：

が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>

を使用してドキュメントをお勧めしますリアクト代わりに、親から子コンポーネントの入力要素にアクセスする、それは以下のようにメソッドを公開する方が良いでしょう

Answer 2

、

class Parent extends React.Component { 

    handleClick =() => { 
    this.refs.child.setFocus(); 
    }; 

    render() { 
    return (
     <div> 
     <Child ref="child"/> 
     <button onClick={this.handleClick.bind(this)}>focus</button> 
     </div> 
    ) 
    } 
} 

class Child extends React.Component { 

    setFocus() { 
    this.refs.myInput.focus(); 
    } 

    render() { 
    return (
     <input type="text" ref="myInput"/> 
    ) 
    } 
} 

ReactDOM.render(<Parent/>, document.getElementById('app'));