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

首先将值添加到您的组件state：

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

您可以将其添加为value元素本身的input属性（以便让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
  });
}

现在，您可以从value功能中的组件state中抓取createTodo：

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

React JS要做列表应用程序|获得价值并推动陈述

1 个答案: