Javascript 在React中，输入字段失去焦点

我知道这是因为React正在重新呈现页面，因此输入字段失去了焦点。我已经尝试了我能想到的一切，但都没有成功！我找不到解决这个问题的办法。 这是我的代码

import React, { ChangeEvent, Component, ReactNode } from 'react'
import { Root, /*Routes*/ } from 'react-static'
import { Link } from '@reach/router'
import { Helmet } from 'react-helmet'
import './app.css'
// import FancyDiv from '@components/FancyDiv'

/* According to the following documentation,
 * https://github.com/nozzle/react-static/blob/master/docs/concepts.md#writing-universal-node-safe-code
 */
let Sidenav = { init(_: any, options: any) { return {_, options} } }
let updateTextFields = () => {}
if (typeof window !== 'undefined') {
  const materialize = require('materialize-css')
  Sidenav = materialize.Sidenav
  updateTextFields = () => materialize.updateTextFields()
}

interface IComponentProps {

}

interface IComponentState {
  'long_url': string
}

const LongUrlInput = (props: any) =>
  <input
    key='in1'
    id="long_url"
    type="text"
    className="validate"
    onChange={ props.handleLongUrl }
  />

export default class App extends Component<IComponentProps, IComponentState> {
  constructor(props: any) {
    super(props)
    this.state = {
      'long_url': ''
    }
  }

  componentDidMount(): void {
    const elem = document.querySelectorAll('.sidenav')
    Sidenav.init(elem, {})
    updateTextFields()
  }

  handleLongUrl = (event: ChangeEvent<HTMLInputElement>): void => {
    console.log('types', event.target.value, this.state.long_url)
    this.setState({
      'long_url': event.target.value
    })
  }

  render(): ReactNode {
    return (
      <Root>

        <Helmet>
          <title>ShortURI - URL Shortener</title>
          <meta name="description" content="Create short URLs and also monitor traffic with proper analysis report." />
        </Helmet>

        <nav className={'indigo'}>
          <div className="nav-wrapper" style={{ padding: '0 20px' }}>
            <Link to={'/'} className={'brand-logo'}>ShortURI</Link>
            <a href={''} data-target="slide-out" className="sidenav-trigger">
              <i className="material-icons">menu</i>
            </a>
            <ul id="nav-mobile" className="right hide-on-med-and-down">
              <li><Link to={'/about'}>About</Link></li>
              <li><Link to={'/#!'}>Login</Link></li>
              <li><Link to={'/#!'}>Register</Link></li>
            </ul>
          </div>
        </nav>
        <ul id="slide-out" className="sidenav">
          <li><a className="sidenav-close" href="#">Clicking this will close Sidenav</a></li>
        </ul>

        <div className="content">
          <div className="row">
            <div className="card">
              <div className="card-content black-text">
                <span className="card-title">Card Title</span>
                <div className="input-field col s6">
                  <LongUrlInput handleLongUrl={this.handleLongUrl}/>
                  <label className="active" htmlFor="long_url">Long URL</label>
                </div>
              </div>
            </div>
          </div>
          {/*<FancyDiv>*/}
            {/*<Routes/>*/}
          {/*</FancyDiv>*/}
        </div>
      </Root>
    )
  }
}

附言：我是新的反应。任何帮助都将不胜感激

---

注意：键入一些随机单词以抑制StackOverflow警告-看起来您的问题主要是代码，诸如此类。

我更改了。。。到不知何故，它现在正在发挥作用。奇怪

输入不应在渲染之间失去焦点。请在例如中创建一个，以便有人更容易帮助您。好的。在几分钟内编辑问题。。。。