Reaction ToDo-Liste zeigt todo onChange, nicht onSubmit

Ich bin ein bisschen neu zu reagieren, und mit allen neuen Programmierbemühungen baue ich eine Todo-App. Bis auf ein Problem scheint alles korrekt zu funktionieren: Wenn ich ein todo in das Eingabefeld gebe und auf "submit" klicke, wird das todo in mein Array geschoben, aber es wird nicht sofort angezeigt. Nur wenn ich den Text in der Eingabe ändere, wird das Todo angezeigt. Ich vermute, das hat etwas damit zu tun, dass das Rendering auf der handleChange-Funktion und nicht auf der handleSubmit-Funktion geschieht. Jede Hilfe würde sehr geschätzt werden.Reaction ToDo-Liste zeigt todo onChange, nicht onSubmit

Hier ist meine AddTodo Komponente

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> 
    ); 
    } 
}

Und meine List-Komponente

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;

Quelle

2017-02-15 Ian Springer