javascript - React JS 待办事项列表应用 |获取值并推送到状态

Question

我正在构建一个待办事项列表应用程序，该应用程序从默认设置的商店中获取两个对象。

无法将用户输入的内容作为新的“待办事项”项目并将其推送到商店/应用程序状态。

如果我单击“新建”按钮，则会成功创建一个新的待办事项，但是没有文本。

我使用handleChange函数从输入中获取值 - 我需要将该值作为createTodo函数的一部分发送到商店。

createToDo 函数调用将新的“待办事项”项目添加到商店的操作。我不知道如何将输入值与该函数联系起来以创建新的待办事项。

这是迄今为止我的代码:

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

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

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

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

  createTodo(text) {
    TodoActions.createTodo();
  }

  handleChange(e) {
    let text = e.target.value;
    console.log(text);
  }

  reloadTodos() {
    TodoActions.reloadTodos();
  }


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

    console.log("todos", todos);

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

    return (
      <div className="todolist-wrapper">
        <h1>To do list</h1>
        <button onClick={this.reloadTodos.bind(this)}>Reload</button>
        <ul>
          {todoitems}
        </ul>
        <input type="text" onChange={this.handleChange.bind(this)} />
        <button onClick={this.createTodo.bind(this)}>Create new</button>
      </div>
    );
  }
}

Answer 1

首先将值添加到组件的状态:

constructor() {
  ...
  this.state = {
    todos: TodoStore.getAll(),
    value: ""
  }
}

您可以将其添加为 input 元素本身的 value 属性(以便让您的 中的初始 value state 控制 input 元素的初始渲染值):

<input type="text" value={this.state.value} onChange={this.handleChange.bind(this)} />

然后在 handleChange 函数中，使用 setState 修改状态值:

handleChange(e) {
  let text = e.target.value;
  this.setState({
    value: text
  });
}

现在，您可以在 createTodo 函数中从组件的 state 获取值:

createTodo() {
  let text = this.state.value;
  TodoActions.createTodo(text);
}