Question

我有这个组件，其中有一个文本字段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>

Answer 1

当将<Route>道具与component配合使用并传递一个函数时，会在每个渲染器上创建一个新组件。因此，在重新创建该组件时会失去焦点。

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

当您使用组件（而不是下面的渲染器或子代）时，路由器使用React.createElement从中创建一个新的React元素给定的组件。也就是说，如果您向 componentprop，您将在每个渲染中创建一个新组件。这个导致现有组件的卸载和新组件的安装安装而不只是更新现有组件。使用时用于内联渲染的内联函数，请使用render或儿童道具（如下）。

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

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

TextField仅接受一个字母并且失去焦点

1 个答案: