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根本没有给我回复。我希望输入字段的值传递到TodoItemComponent，以便在我点击添加时显示。

Answer 1

在构造函数中调用super（props），在addTodo（e）函数中调用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>
                    ))}

<强>更新在addTodo（）

中代替todos.push(e.target.value);执行todos.push(this.state.todo);

Answer 2

你需要在构造函数中调用super（props）。

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

类组件应始终使用props调用基础构造函数。

希望这有帮助。

嗨，我没有足够的信用评论，你需要改变你的代码：

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

this.prop虽然没有成功

2 个答案: