时间戳

首页 > 解决方案 > TextField 只接受一个字母并失去焦点

reactjs - TextField 只接受一个字母并失去焦点

问题描述

我有这个组件，我有一个文本字段organizationName供用户输入其名称。我将此文本字段包含在路由器中，以便在特定路由与此匹配时显示。

但是，当我将它包含到此路由器时，Textfield 只是出错，让我在失去焦点后只输入一个字母。然后我必须一次又一次地输入下一个字母。我认为这是我导入此内容的方式。任何帮助都意义重大。

我正在使用material-UI和react-routerv4

const [organizationName, setOrganizationName] = useState('')

const handleChange = (event) => {
    setOrganizationName(event.target.value)
  }

这是我导入的 Textfield 函数：

 const addOrganizationView = () => {
    return (
      <div className={content}>
        <h1 className={header}>Organization Setup</h1>
        <div className={organizationFormWrapper}>
          <TextField
            label='Organization Name'
            variant='outlined'
            name='organizationName'
            className={textField}
            value={organizationName}
            onChange={(event) => handleChange(event)}
          />
          <Button
            variant='contained'
            color='primary'
            className={addOrganizationButton}
            onClick={(event) => handleOrganizationAdd(event)}
            startIcon={<SaveIcon />}
          >
            Save
          </Button>
        </div>
      </div>
    )
  }

这是路由器

<div className={container}>
  <CustomizedStepper />
    <Switch>
      <Route
        path='/setup-organization'
          exact
          component={addOrganizationView}
        />
      <Route
        exact
        path='/setup-organization/invite'
        component={InvitationPage}
      />
   </Switch>
 </div>

标签： reactjsmaterial-ui

解决方案

当你使用<Route>propcomponent并传递给它一个函数时，你会在每个渲染上创建一个新组件。因此在重新创建该组件时失去焦点。

您要做的是使用render道具并将其传递给函数。

当你使用组件（而不是渲染或子，下面）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。这意味着如果您为 componentprop 提供内联函数，您将在每次渲染时创建一个新组件。这会导致现有组件卸载和新组件安装，而不是仅仅更新现有组件。使用内联函数进行内联渲染时，请使用 render 或 children 道具（如下）。

https://medium.com/@migcoder/difference-between-render-and-component-prop-on-react-router-v4-368ca7fedbec

<Route 
  path='/setup-organization'
  exact
  render={addOrganizationView}
/>

推荐阅读