this.prop没有得到正确的，虽然

Question

我一个简单的待办事项应用工作实践我的反应能力。我有3个组件，我将在下面向您展示。

的问题是，我的道具是没有得到低谷正确的，因为当onChange方法设置的State我会告诉你它不仅是公认的：

这里是我的AddTodoComponent：

import React, { Component } from 'react'; 
import '../../App.css'; 
import update from 'react-addons-update'; 

import TodoItemComponent from '../TodoItemComponent/TodoItemComponent'; 

class AddTodoComponent extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      todo: '', 
      todoArray: [] 
     }; 
    } 

    addTodo(e){ 
     console.log('e', e.target.value, 'todoArray', this.state.todoArray); 
     this.state.todoArray.push(e.target.value); 
     this.setState({ todo: this.state.todo }); 

     // this.state.todoArray.push(<TodoItemComponent todo={this.state.todo} onDelete={this.delete}></TodoItemComponent>); 
    } 

    delete(index){ 
     console.log('thisIndex', index); 

     this.setState({ 
      todoArray: update(this.state.todoArray, {$splice: [[index, 1]]}) 
     }); 
    } 

    handleChange(e){ 
     this.setState({ todo: e.target.value }); 
    } 

    render() { 
     return (   
      <div> 
       <div className="input-group m-b-md"> 
        <input type="text" className="form-control add-todo" placeholder="Todo..." value={this.state.todo} onChange={this.handleChange.bind(this)} /> 
        <span className="input-group-btn"> 
         <button className="btn btn-react" type="button" onClick={this.addTodo.bind(this)}> Add</button> 
        </span> 
       </div> 
       <ul className="list-group"> 
        {this.state.todoArray.map((todo, index) => (
         <TodoItemComponent todo={this.state.todo} key={index} onDelete={this.delete.bind(this, index)}></TodoItemComponent> 
        ))} 
       </ul> 
      </div> 
     ); 
    } 
} 

export default AddTodoComponent; 

而且这里是TodoItemComponent.jsx：

import React, { Component } from 'react'; 
import '../../App.css'; 

class TodoItemComponent extends Component { 
    deleteTodo(todo){ 
     console.log('deleteTodo', this.props.todo); 
     this.props.onDelete(this.props.todo); 
    } 

    render() { 
     console.log('this.props.todo', this.props.todo); 

    return (
     <div>    
      <li className="list-group-item todo-item"> 
       <button className="btn btn-xs btn-react btn-circle m-r-md"> 
        <span className="fa fa-check"></span> 
       </button> 
       {this.props.todo} 
       <span className="pull-right"> 
        <button className="btn btn-xs btn-react btn-circle m-r-xs"> 
         <span className="fa fa-pencil-square-o"></span> 
        </button> 

        <button className="btn btn-xs btn-react btn-circle" onClick={() => this.deleteTodo(this.props.todo)}> 
         <span className="fa fa-trash-o"></span> 
        </button> 
       </span> 
      </li> 
     </div> 
    ); 
    } 
} 

export default TodoItemComponent; 

这里this.props.todo没有给我回应所有..我はNT中的输入字段的值传递波谷到TodoItemComponent显示，当我点击添加。

Answer 1

调用超（道具）的构造和addTodo（五）功能改变this.setState({ todo: this.state.todo })到

const todos this.state.todoArray.slice(); 
todos.push(e.target.value); // this will insert the button state 
this.setState({ todoArray: todos }); 

并在渲染 代替

{this.state.todoArray.map((todo, index) => (
    <TodoItemComponent todo={this.state.todo} key={index} onDelete={this.delete.bind(this, index)}></TodoItemComponent> 
        ))} 

做到这一点

{this.state.todoArray.map((todo, index) => (
    <TodoItemComponent todo key={index} onDelete={this.delete.bind(this, index)}></TodoItemComponent> 
        ))} 

更新：的 代替todos.push(e.target.value);做todos.push(this.state.todo);在addTodo（）

Answer 2

你需要调用超（道具）的构造。

来源： https://facebook.github.io/react/docs/state-and-lifecycle.html#adding-local-state-to-a-class

类成分，应该总是调用道具基本构造。

希望这会有所帮助。

您好，我没有足够的信誉发表评论，你需要改变这样的代码：

class TodoItemComponent extends Component { 
    constructor(props){ 
     super(props); 
    } 

deleteTodo(todo){ 
    console.log('deleteTodo', this.props.todo); 
    this.props.onDelete(this.props.todo); 
} 
render() { 
    console.log('this.props.todo', this.props.todo); 
return (
    <div>    
     <li className="list-group-item todo-item"> 
      <button className="btn btn-xs btn-react btn-circle m-r-md"> 
       <span className="fa fa-check"></span> 
      </button> 
      {this.props.todo} 
      <span className="pull-right"> 
       <button className="btn btn-xs btn-react btn-circle m-r-xs"> 
        <span className="fa fa-pencil-square-o"></span> 
       </button> 

       <button className="btn btn-xs btn-react btn-circle" onClick={() => this.deleteTodo(this.props.todo)}> 
        <span className="fa fa-trash-o"></span> 
       </button> 
      </span> 
     </li> 
    </div> 
); 
}}