CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-reduxflux
George Welder
George Welder

Reputation: 4045

On click on <div>, focus input field - How to do this with React / Redux?

That's basically my question. I have different containers & components. If a certain div is clicked in a certain container or component, I want to set the focus to the input field of a different container/component.

However, I do not know how to do this with Redux. I could dispatch an action

export const focusInputField = () => {
  return {
    type: "FOCUS_INPUTFIELD"
  }
}

but I am not sure what to do in my reducer? I have a reducer for the currently displayed person, for all the persons and also one for the currently selected (school) class. It is not obvious to me now, how to integrate the state of the input field in here. Maybe I am thinking to object-oriented?

But even if there was a state for the input field, I would not be quite sure how to change focus in the React component then. How could I just watch that state change and then, if the state changes from false to true say, change the focus?

Upvotes: 2

Views: 137

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281676

Maintain a state in for the corresponding reducer

Dispatch an action as

export const focusInputField = () => {
  return {
    type: "FOCUS_INPUTFIELD"
  }
}

In the reducer 

var initialState={inFocus: false}
const someReducer = (state=initialState, action) => {
   switch(action.type) {
       case FOCUS_INPUTFIELD:
           return {
               ...state, inFocus: true
           }
       case FOCUSOUT_INPUTFIELD: 
           return {
               ...state, inFocus: false
           }
       default: return state
   }
}
export default someReducer;

Then in the containers componentWillReciveProps

componentWillReceiveProps(nextProps) {
     if(this.props.inFocus !== newProps.inFocus) {
          if(newProps.inFocus == true) {
             this.inputRef.focus();
          }
     }
}

Upvotes: 1

Related Questions