コンポーネント2のボタンをクリックして、コンポーネント1のReact/Redux-focus入力フィールド

Question

私はここで質問しましたが、より具体的であったはずです。この（あるいは少なくともそのrenderメソッド）のように見え、これらの成分を含有だから私の高次の成分を、

：：私は、より高次のコンポーネントから呼び出す二つの成分を、持っていると言う今

<div> 
    <Navigation /> 
    <View /> 
</div> 

、 Navigation />にはボタンが含まれています。ボタンをクリックするたびに、入力フィールドにフォーカスを設定したいとします。入力フィールドは<View />です。これは違いを作る必要がある場合、私は道でReduxのを使用しています

<button onClick={() => {this.myInp.focus()}}>Focus Input</button> 
<input type="text" ref={(ip) => this.myInp = ip} /> 

：両方の物事は非常に同じコンポーネントにあった場合

は、私はこのような何かをするだろうということを学びました。

Answer 1

彼らはあなたが親divにそのstate要素を変更し、ViewへpropsとNavigationとして伝承しstate要素や機能を使用することができ、同じ要素の子孫なので。

constructor(){ 

    super() 

    this.state = { 
    inputFocus:false; 
    } 

    this.setInputFocus = this.setInputFocus.bind(this) 

} 

setInputFocus(value){ 
    this.setState({inputFocus:false}); 
} 

次にDIVのrender方法わずかNavigation

<button onClick={() => {this.props.setInputFocus(true)}}>Focus Input</button> 

とView

<input type="text" ref={(ip) => this.myInp = ip}/> 

中で props

<div> 
    <Navigation setInputFocus={this.setInputFocus}/> 
    <View inputFocus={this.state.inputFocus}/> 
</div> 

としてそれらを渡します3210

を入力し、にこれを設定して、propsがいつ変更されたかを検出し、アクションを実行します。

だから、

componentWillReceiveProps(nextProps){ 

    if(nextProps.inputFocus) 
     this.myInp.focus() 

} 

親でinputFocus変化は、それがView要素とfocusinputでcomponentWillReceivePropsを発射します。

Answer 2

この問題には、参照情報とともに、子から親、子から親への対話も含まれます。

以下のスニペットではナビゲーションコンポーネントを作成していますが、コンポーネントが直接兄弟にアクセスすることはできないため、親コンポーネントを呼び出す必要があります。親からは、レフリーを通じて、子コンポーネントへのアクセスを得ることができ、順番に、あなたはまた、子コンポーネントで定義されている参照文献

が

class App extends React.Component { 
 
    focusInput =() => { 
 
     this.myView.myInput.focus() 
 
    } 
 
    render() { 
 
    
 
    return (
 
     <div> 
 
     <Navigation focusInput={this.focusInput}/> 
 
      <View ref={(view) => {this.myView = view}}/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 

 
class Navigation extends React.Component { 
 
    render() { 
 
    return (
 
     <button onClick={() => this.props.focusInput()}>Focus</button> 
 
    ) 
 
    } 
 
} 
 
class View extends React.Component { 
 
    render() { 
 
    return (
 
     <input type="text" ref={(ip) => this.myInput = ip}/> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, 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>

以下のスニペットを参照してくださいにアクセスすることができます複数の異なる入力をフォーカスするナビゲーションボタンに複数のボタンがある場合は、次のようにします。

class App extends React.Component { 
 
    focusInput = (ip) => { 
 
     this.myView[ip].focus() 
 
    } 
 
    render() { 
 
    
 
    return (
 
     <div> 
 
     <Navigation focusInput={(val) => this.focusInput(val)}/> 
 
      <View ref={(view) => {this.myView = view}}/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 

 
class Navigation extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
      <button onClick={() => this.props.focusInput("myInput1")}>Focus1</button> 
 
      <button onClick={() => this.props.focusInput("myInput2")}>Focus2</button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 
class View extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
      <input type="text" ref={(ip) => this.myInput1 = ip}/> 
 
      <input type="text" ref={(ip) => this.myInput2 = ip}/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, 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>

以前QUESに、QUESもあなたにこのためのソリューションを提供することを答え1は、受け入れ答えでこれを言及