无法在 react 中调用自定义返回组件和状态更新方法？

Question

我有一个名为homeMessage的子组件，它包含表单和一个输入标签。

import React,{Component} from "react";
import {BrowserRouter as Router, Link, Switch, Route} from "react-router-dom";
import SignUp from './SignUp';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      firstName: ''
    };
  }
  inputData = (event) =>
  {
    this.setState({
      [event.target.name]:event.target.value
    });
  }
  submitData = (event) =>
  {
    event.preventDefault();
  }
  render(){
    let homeMessage = () =>
    {
      return(
        <div>
          <form onSubmit={this.submitData}>
            FirstName:
            <input type="text" name="firstName" onChange={this.inputData}/>
            <button type="submit">Submit</button>
          </form>
          <Link to="/src/SignUp">SignUp</Link>
        </div>
      );
    }
    return(
      <Router>
        <div>
          <Route exact path="/" component={homeMessage}/>
          <Route path="/src/SignUp" render={(props)=><SignUp firstName={this.state.firstName}/>}/>
        </div>
      </Router>
    );
  }
}
export default App;

当我以原始返回方法编写homeMessage内容的内容时，它工作正常，但是当我在每次击键时都像上面那样创建自定义返回组件时，它会删除我的光标！

Answer 1

将homeMessage子组件的定义更改为 -

const homeMessage = (
      <div>
        <form onSubmit={this.submitData}>
          FirstName:
          <input type="text" name="firstName" onChange={this.inputData}/>
          <button type="submit">Submit</button>
        </form>
        <Link to="/src/SignUp">SignUp</Link>
      </div>
  );

这应该可以正常工作。