TextField принимает только одну букву и теряет фокус

Question

У меня есть этот компонент, где у меня есть текстовое поле organizationName, чтобы пользователь мог ввести его имя. Я включаю это текстовое поле в маршрутизатор, чтобы отобразить его, когда указанный маршрут c соответствует этому.

Однако, когда я включаю его в этот маршрутизатор, текстовое поле просто вызывает ошибки и позволяет мне вводить только одну букву после получения несфокусированного. Затем я должен снова и снова набирать следующую букву. Я предполагаю, что это способ, которым я импортирую это из чего-то. Любая помощь будет много значить.

Я использую 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 опору и передать ей функцию.

Когда вы используете компонент (вместо render или children, ниже) маршрутизатор использует React.createElement для создания нового элемента React из данного компонента. Это означает, что если вы предоставите встроенную функцию для компонента prop, вы будете создавать новый компонент при каждом рендеринге. Это приводит к размонтированию существующего компонента и монтированию нового компонента вместо простого обновления существующего компонента. При использовании встроенной функции для встроенного рендеринга используйте рендер или дочернюю опору (ниже).

https://medium.com/@migcoder / разница-между-рендерингом-и-компонентом-проп-на- response-router-v4-368ca7fedbe c

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