构造函数和其他方法的函数通信问题？

我正在尝试使用render＆return方法创建一个自定义函数，它仅打印“ Hello World”或任何哑组件类型之类的详细信息。但是，当我尝试使它像使用其他方法更新props值那样复杂时，它会显示错误。

我的代码是：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

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();
    console.log(this.state.firstName);
  }
  inputData()
  {
    return(
      <div>
        <form onSubmit={this.submitData}>
          FirstName:
          <input type="text" name="firstName" onChange={this.inputData} />
          <button>Submit</button>
        </form>
      </div>
    );
  }
  render() {
    return (
      <div>
        {this.inputData()}
      </div>
    );
  }
}

export default App;

在我的inputdata函数中，当我尝试使它成为哑组件或类似内容时，它没有显示错误，但是当其他一些函数（如inputData和SubmitData）调用时，则显示错误。

请解决！

下面是错误

TypeError: Cannot read property 'target' of undefined
App._this.inputData
src/App.js:14
  11 |   };
  12 | }
  13 | inputData = (event) => {
> 14 |   this.setState({
  15 |     [event.target.name]:event.target.value
  16 |   });
  17 | }
View compiled
App.render
src/App.js:37
  34 | render() {
  35 |   return (
  36 |     <div>
> 37 |       {this.inputData()}
  38 |     </div>
  39 |   );
  40 | }
View compiled
▶ 20 stack frames were collapsed.
./src/index.js
src/index.js:7
   4 | import App from './App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 |