javascript - 单击 ，焦点输入字段 - 如何使用 React/Redux 执行此操作？

Question

这基本上就是我的问题。我有不同的容器和组件。如果在某个容器或组件中单击某个div，我想将焦点设置到不同容器/组件的输入字段。

但是，我不知道如何用 Redux 做到这一点。我可以发送一个 Action

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

但我不确定在我的 reducer 中该做什么？我有一个用于当前显示的人的 reducer ，用于所有的人，还有一个用于当前选择的(学校)类(class)。现在对我来说并不明显，如何在这里整合输入字段的状态。也许我在考虑面向对象？

但即使输入字段有状态，我也不确定如何在 React 组件中更改焦点。我怎么能只观察状态的变化，然后，如果状态从 false 变为 true，就改变焦点？

Answer 1

为相应的reducer维护一个状态in

发送一个 Action

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

在 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;

然后在容器componentWillReciveProps

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