javascript 键入时输入失去焦点，只允许输入一个字符

我有一个子组件，它接收一个带有字符串属性的数组和一个组件

const FormWizardItems = [
    {
      title: "Organization Data",
      number: 1,
      component: () => (
        <CustomerOrganizationDataTabContentFrm validation={validation} />
      ),
    }
  ]

  return (
    <>
      <FormWizard
        validation={validation}
        apiCallResponse={registrationError}
        breadcrumbTitle="Clientes"
        breadcrumbItemTitle="Register Customer"
        cardTitle="Clientes"
        cardDescription="Register Customer"
        items={FormWizardItems}
      />
    </>
  )

FormWizard组件在内部将每个组件传递给另一个组件（FormWizardContent），后者呈现接收到的数组中的所有组件

<CardBody>
                  <h4 className="card-title mb-4">{cardTitle}</h4>
                  <div className="wizard clearfix">    
                    <div className="steps clearfix">
                      <ul>
                        {items.map(item => {
                          return (
                            <FormWizardNavItem
                              key={item.number}
                              number={item.number}
                              title={item.title}
                              activeTab={activeTab}
                              passedSteps={passedSteps}
                              setActiveTab={setActiveTab}
                            />
                          )
                        })}
                      </ul>
                    </div>
                    <div className="content clearfix">
                      <TabContent activeTab={activeTab} className="body">
                        {items.map(item => {
                          const Component = item.component

                          return (
                            <FormWizardContent
                              key={item.number}
                              tabId={item.number}
                              activeTab={activeTab}
                              component={() => (
                                <Component exampleProp="Hello" />
                              )}
                            />
                          )
                        })}
                      </TabContent>
                    </div>

表单向导内容组件

import React from "react"
import { TabPane } from "reactstrap"

export const FormWizardContent = props => {
  const { tabId, component: Component } = props
  return (
    <TabPane tabId={tabId}>
      <Component />
    </TabPane>
  )
}

它呈现的表单（CustomerOrganizationDataTabContentFrm）是一个具有来自父组件（CustomerFrm）的依赖属性（验证）的表单

const validation = useFormik({
    enableReinitialize: true,

    initialValues: {
      BusinessName: "",
      TradingName: "",
      EinItin: "",
      StateEin: "",
      OtherTaxPayerStateEin: "",
      CityEin: "",
      CompanyCategory: "",
      HeadquarterId: null,
      IsActive: true,
    },
    validationSchema: Yup.object({
      BusinessName: Yup.string()
        .required("Business Name is required")
        .min(3, "Business Name should have at minimun of 3 characters")
        .max(3, "Business Name should have up to 3 characters")
      TradingName: Yup.string()
        .required("Trading Name is required")
        .min(3, "Trading Name should have at minimun of 3 characters")
        .max(3, "Trading Name should have up to 3 characters"),
    }),
    onSubmit: values => {
      dispatch(registerRole(values))
    },
  })

问题是，当我输入它只允许一个字符和失去重点，我不能管理它正常工作，任何帮助将不胜感激。提前感谢！

我发现了问题，原因是这两部分代码中的匿名呈现函数

const FormWizardItems = [
    {
      title: "Organization Data",
      number: 1,
      component: () => (
        <CustomerOrganizationDataTabContentFrm validation={validation} />
      ),
    }
  ]

<TabContent activeTab={activeTab} className="body">
  {items.map((item) => {
    const Component = item.component;

    return (
      <FormWizardContent
        key={item.number}
        tabId={item.number}
        activeTab={activeTab}
        component={() => <Component exampleProp="Hello" />}
      />
    );
  })}
</TabContent>;

根据我所看到的，每当有一些状态改变时，就会生成并呈现一个新的表单，而不是重新呈现现有的示例。
这么解决的

[{
  title: "Organization Data",
  number: 1,
  component: CustomerOrganizationDataTabContentFrm,
}]

<TabContent activeTab={activeTab} className="body">
      {items.map(item => {
      return (
      <FormWizardContent
      key={item.number}
      tabId={item.number}
      activeTab={activeTab}
      validation={validation}
      component={item.component}
    />
  )
})}

javascript 键入时输入失去焦点，只允许输入一个字符

1条答案

相关问题

热门标签

最新问答