分派后输入失去焦点，但前提是它在模态内

问题描述

我正在使用 React（样式化组件）+ Redux 来构建应用程序，但我在想办法解决这个问题时遇到了麻烦。

我有一个组件 TextBox，我将其导入以在其他组件中重用。在用于 Modal 组件之前，它运行良好。

问题是当 dispatch 触发时，整个 AddPedido 被重新渲染，这导致 textBox 失去焦点。

我尝试过的事情：

• 为每个父元素设置'key'属性
• 将输入组件移到 TextBox 的返回之外，将其作为函数调用

需要考虑的事项：

• 在模态之外使用时，正常工作；
• 如果我将 TextBox 直接声明为 Modal 子项，它也可以使用

因此，我试图找到一种方法来使用 AddPedido 作为 Modal 子项，而不是对其进行硬编码。

import Modal from '../../../components/modal'
import { AddPedido } from './addPedido/addPedido.jsx'

const vendas = (props) => {
  return (
    <>
      <Modal
      layer="layer1"
      closeModal={ closeAddPedido }
      >
        <AddPedido/>
      </Modal>
    </>
  )
}

export default vendas

模态组件：

import {ModalBody,ModalContent,ModalHeader,ModalFooter,ModalShadow} from './style'

const Modal = (props) => {
  const modalContainer = () => {
    return(
    <>
      <ModalShadow 
      onClick={props.closeModal}
      />
      <ModalBody>
        <ModalContent>
          {props.children}
        </ModalContent>
      </ModalBody>
    
    </>
    )
  }

  return ReactDOM.createPortal(modalContainer(),document.getElementById(props.layer),);
}

export default Modal

AddPedido 组件：

import { useSelector,usedispatch } from 'react-redux'
import {singleAction} from '../../../../storage/Actions'

import TextBox from '../../../../components/textBox'

export const AddPedido = () => {
  const refPedido = useSelector(state => state.vendas_formPedido.refPedido)
  return (
    <>
      <TextBox 
      name="Ref. Pedido"  
      value={refPedido}  
      setValue='FORM_PEDIDO__SET_REF_PEDIDO'
      />
    </>
  )
}

TextBox 组件：

import {usedispatch} from 'react-redux'
import {singleAction} from '../../storage/Actions'

import { Input,PlaceHolder } from './style'

const InputComponent = (props) => ( 
  <Input
  onChange={props.onChange}
  onClick={props.onClick}
  onUpdate={props.onUpdate}
  type={props.type}
  name={props.name}
  value={props.value}                
  editable={props.editable}          
  required 
  />
)

const TextBox = (props) => {
  
  const dispatch = usedispatch()
  const dispatchHandler = (setValue,value) => {dispatch(singleAction(setValue,value))}
  const onFocusHandler = (e) => props.editable == false ? e.target.blur() : props.onFocus

  return (
    <>
        <InputComponent
         onChange={e => dispatchHandler(props.setValue,e.target.value)}
         onClick={props.onClick}
         onUpdate={(props) => props.onUpdate}
         type={props.type}
         name={props.name}
         value={props.value}                
         editable={props.editable}
         />

        <PlaceHolder>
          {props.name}
        </PlaceHolder>
    </>
  )
}

export default TextBox

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）