REACTJS無法從形式採取輸入數據

Question

嗨懂行的人在StackOverflow上，

I'm currently following a REACTJS tutorial and I have no idea how to save the input data that the user types into the input form. What is supposed to happen is that whenever the user clicks the button, it should also take what the user typed and enter it into the todolist. However, all it does is that it displays a timestamp. Please help, it would be very much appreciated. The code is here, it's specifically lines 48-49: 

這裏是Todos.js文件：

import React from "react"; 
import Todo from "../components/Todo"; 
import * as TodoActions from "../actions/TodoActions"; 
import TodoStore from "../stores/TodoStore"; 

export default class Featured extends React.Component { 
     constructor(){ 
     super(); 
     this.getTodos = this.getTodos.bind(this); 
     this.state = { 
      todos: TodoStore.getAll(), 
      loading: true, 
     }; 
     } 

     componentWillMount(){ 
     TodoStore.on("change", this.getTodos); 
     console.log("count", TodoStore.listenerCount("change")); 
     } 

     componentWillUnmount(){ 
     TodoStore.removeListener("change", this.getTodos); 
     } 

     getTodos(){ 
     this.setState({ 
      todos: TodoStore.getAll(), 
     }); 
     } 

     reloadTodos(){ 
     TodoActions.reloadTodos(); 
     } 

     createTodo(){ 
     TodoActions.createTodo(Date.now()); 
     } 

     render(){ 
     const {todos} = this.state; 

     const TodoComponents = todos.map((todo) => { 
      return <Todo key={todo.id} {...todo}/>; 
     }); 

     return(
      <div> 
      <button onClick=    {this.createTodo.bind(this)}>CREATE</button> 
      <input type="text"/> 
      <h1>Todos</h1> 
      <ul>{TodoComponents}</ul> 
      </div> 
     ); 
     } 
    } 

這裏是TodoActions.js文件：

import dispatcher from "../dispatcher"; 

export function createTodo(text){ 
    dispatcher.dispatch({ 
    type: "CREATE_TODO", 
    text, 
    }); 
} 

export function deleteTodo(id){ 
    dispatcher.dispatch({ 
    type: "DELETE_TODO", 
    id, 
    }); 
} 

export function reloadTodos(){ 


    dispatcher.dispatch({type:"FETCH_TODOS"}); 
    setTimeout(() => { 
    dispatcher.dispatch({type: "RECEIVE_TODOS", todos:[ 
     { 
     id:1234567, 
     text: "Work Again", 
     complete: false 
     }, 
     { 
     id:1234679, 
     text:"Go Shopping and Enjoy It Again!", 
     complete: true 
     }, 
    ]}); 
    }, 1000); 
} 

這裏是TodoStore.js文件：

import {EventEmitter} from "events"; 
import dispatcher from "../dispatcher"; 

class TodoStore extends EventEmitter { 
    constructor(){ 
    super() 
    this.todos = [ 
     { 
     id:12345, 
     text: "Work", 
     complete: false 
     }, 
     { 
     id:12346, 
     text:"Go Shopping and Enjoy It!", 
     complete: false 
     }, 
    ]; 
    } 

    createTodo(text){ 
    const id = Date.now(); 

    this.todos.push({ 
     id, 
     text, 
     complete:false, 
    }); 

    this.emit("change"); 
    } 


    getAll(){ 
    return this.todos; 
    } 

    handleActions(action){ 
    switch(action.type){ 
     case "CREATE_TODO":{ 
     this.createTodo(action.text); 
     break; 
     } 
     case "RECEIVE_TODOS":{ 
     this.todos = action.todos; 
     this.emit("change"); 
     break; 
     } 
    } 
    } 

} 

const todoStore = new TodoStore; 
dispatcher.register(todoStore.handleActions.bind(todoStore)); 
window.dispatcher = dispatcher; 

export default todoStore; 

我已經搜索過StackOverflow，也做過大量的在線搜索，並且ReactJS站點文檔有點混亂。請幫忙。這將不勝感激。

Answer 1

使用Redux Form您將擁有一個函數onSubmit，其中包含來自表單的所有輸入。