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

Posted 2023-02-22

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

【英文标题】：On click on <div>, focus input field - How to do this with React / Redux?

【发布时间】：2017-09-12 23:10:37

【问题描述】：

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

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

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

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

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

【参考方案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();
          
     

【讨论】：

要设置this.inputRef，在渲染组件时使用ref function，记得在onBlur function中调度FOCUSOUT_INPUTFIELD动作。

@MichaelPeyper，是的，你是对的，我应该使用回调设置，这就是我在我的答案中写的而不是 this.refs.inputRef

我以为您知道，我的评论更针对任何查看此答案并希望为他们填补一些空白的人。

我明白了，因为我一到家就会编辑我的答案以填写你的建议。