React JSリストアプリをする|値を取得し、状態にプッシュ

Question

私は、デフォルトとしてストアセットから2つのオブジェクトを取っているリストアプリケーションを構築しています。

ユーザーが新しい「行うべき」項目として入力した内容を取り出し、ストア/アプリケーション状態にプッシュするのに問題があります。

「新規作成」ボタンをクリックすると、新規作成するアイテムが正常に作成されますが、テキストは作成されません。

handleChange関数を使用して入力値を取得しています - その値をcreateTodo関数の一部としてストアに送信する必要があります。

createToDo関数は、新しい「ToDo」アイテムをストアに追加するアクションを呼び出します。私はどのように入力値をその関数に結びつけて新しい作業項目を作成するのか分かりません。ここで

は私のコードは、これまでのところです：

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: "" 
    } 
} 

あなたは順番にinput要素自体（のvalue属性としてこれを追加することができますあなたのstate内の最初のvalueがinput要素の最初にレンダリングされた値を制御できるようにする：

あなた handleChange機能で次に

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

、setStateを使用して状態の値を変更します。

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

今、あなたは、コンポーネントのstateあなたcreateTodo関数内からvalueをつかむことができます。

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