onchange和onclick事件处理程序，用于响应onchange事件

Question

我的目标是在按下按钮后操纵输入到文本字段的数据。这是通过使用文本输入元素的onchange属性收集数据，然后在触发onclick事件后操作数据来完成的。

但是，两个处理程序都会响应onchange事件而执行，而响应onclick事件则没有任何反应。

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

class App extends Component {
  constructor() {
      super()
      this.state = {input: undefined}
  }

  render() {
    return (
      <div className="App" marginTop="200px">
        <div className="App-header">
          <h2>Timestamp Microservice</h2>
        </div>
        <p className="App-intro">
          Converts a Unix timestamp (2365145258) to a natural language date (December 16, 2016) and vice versa.
        </p>
        <form>    
          <input type="text" onChange={(event) => this.setState({input: event.target.value})}/> <br/>
          <input type="submit" onClick={() => console.log(this.state.input)}/>
        </form>
      </div>
    );
  }
}

export default App;

有谁知道为什么会这样？

谢谢！