React待办事项列表显示待办事项onChange，而不是提交

我对React有点新鲜，并且所有新的编程工作都在构建待办事项应用程序。除了一个问题之外，一切似乎都正常工作：当我在输入字段中输入待办事项并单击“提交”时，待办事项会被推入我的数组中，但不会立即显示。只有当我更改显示待办事项的输入内的文本时。我猜这与handleChange函数发生的渲染有关，而不是handleSubmit函数。任何帮助将不胜感激。React待办事项列表显示待办事项onChange，而不是提交

这里是我的AddTodo组件

import React, { Component } from 'react'; 
import App from "./App" 
import List from "./List" 


class AddTodo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: '', 
     array: [] 
    }; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
    this.setState({value: event.target.value}); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 
    var array = this.state.array 
    array.push(this.state.value); 
    console.log(array) 
    } 

    render() { 
    return (
     <div> 
     <form> 
      <label> 
      Name: 
      <input type="text" value={this.state.value} onChange={this.handleChange} /> 
      </label> 
      <input onClick={this.handleSubmit} type="submit" value="Submit" /> 
     </form> 
     <List array={this.state.array}/> 
     </div> 
    ); 
    } 
}

而我的列表组件

import React, { Component } from 'react'; 

class List extends Component{ 
    render(){ 
    return(
     <div> 
     { 
     this.props.array.map(function(item, index){ 
      return <li key={index}>{item}</li> 
     }) 
     } 
     </div> 
    ) 
    } 
} 

export default List;

来源

2017-02-15 Ian Springer