Question

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

但是，我不知道如何使用Redux执行此操作。我可以发出一个动作

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

但我不知道在减速机中该怎么办？我为当前显示的人员提供了减速器，适用于所有人员以及当前所选（学校）课程的减速器。现在对我来说，如何在这里整合输入字段的状态并不明显。也许我在想面向对象？

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

Answer 1

维持相应减速器的状态

将行动发送为

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

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

1 个答案: