React / Redux-通过单击组件2中的按钮来聚焦组件1的输入字段

Question

I asked a question on here earlier, but I think I should have been more specific. Say I have two components, which I call from a higher order component:

So my higher order component, containing these components, looks like this (or at least its render method):

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

Now, Navigation /> contains a button. Whenever that button is clicked, I want to set the focus on an input field, which is in <View /> .

If both things were in the very same component, I learned that I would do something like this:

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

I am using Redux by the way, if this should make a difference.

Answer 1

Since they are descendants of the same element you can use a state element and function to change that state element in the parent div and pass down as props to View and Navigation .

constructor(){

   super()

   this.state = {
    inputFocus:false;
   }

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

}

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

Then in the render method of the div just pass them down as props

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

In the Navigation

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

and in the View

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

and have this in the componentWillReceiveProps which detects when props change and runs actions then.

componentWillReceiveProps(nextProps){

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

}

So when the inputFocus changes in the parent it will fire the componentWillReceiveProps in the View element and focus the input .

Answer 2

Along with the refs, this problems also involves child to parent and parent to child interaction.

So what I am doing in the below snippet is form the Navigation component, I have to call the parent component since a component can't directly have access to its siblings. From the parent you can get access to the child component through refs and in turn you can also access the refs which are defined in the child component

See the snippet below

 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> 

In case you have multiple buttons in navigation thorugh which you want to focus multiple different inputs, you can do so in the following manner

 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>