单击 <div> 时，聚焦输入字段 - 如何使用 React / Redux 执行此操作？

Question

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

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

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

但我不确定在我的减速器中做什么？我有一个用于当前显示的人的减速器，用于所有的人，还有一个用于当前选择的（学校）班级。现在对我来说并不明显，如何在这里整合输入字段的状态。也许我正在考虑面向对象？

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

Answer 1

为相应的reducer维护一个状态

将动作发送为

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

在减速器中

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();
          }
     }
}