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，其中包含表单中的所有输入。

REACTJS无法从表单中获取输入数据

1 个答案: