Question

我正在研究Reactjs，正在构建一个任务项目（CRUD），但是我停留在编辑时，编辑部分在另一个组件中，并且我无法发送任务的索引它将被编辑，我阅读了文档，但是我却做不到，请有人看到我的代码并告诉我我做错了吗。

应用（主）代码

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

    // data
    import { todos2 } from './todos.json';

    // subcomponents
    import TodoForm from './components/TodoForm';
    import TodoFormEdit from './components/TodoFormEdit';

    class App extends Component {
      constructor() {
        super();
        this.state = {
          todos2, mode:'view'
        }

        this.handleAddTodo = this.handleAddTodo.bind(this);
        this.handleEdit2 = this.handleEdit2.bind(this);
      }

      removeTodo(index) {
        this.setState({
          todos2: this.state.todos2.filter((e, i) => {
            return i !== index
          })
        }); 
      }

      handleAddTodo(todo) {
        this.setState({
          todos2: [...this.state.todos2, todo]
        })
      }


      handleEdit2(i) {
        this.setState({mode: 'edit'});
        //const mode = mode === 'edit';


        alert(i);

         /* alert(this.state.todos2[i].title);
          alert(this.state.todos2[i].priority);
          alert(this.state.todos2[i].description);
          alert(this.state.todos2[i].language);*/


      }

      render() {

        const todosAll = this.state.todos2.map((todo, i) => {
          return (
            <div className="col-md-4" key={i}>
              <div className="card mt-4">
                <div className="card-title text-center">
                  <h3>{todo.title} - { i } </h3>
                  <span className="badge badge-pill badge-danger ml-2">
                    {todo.priority}
                  </span>
                </div>
                <div className="card-body">
                  <div>
                    {todo.description}
                  </div>
                  <div>
                    {todo.language}
                  </div>
                </div>
                <div className="card-footer">
                  <button
                    className="btn btn-danger"
                    onClick={this.removeTodo.bind(this, i)}>
                    Delete
                  </button>
                  <button
                    className="btn btn-warning ml-2"
                    onClick={this.handleEdit2.bind(this, i)}>
                    Edit
                  </button>
                </div>
              </div>
            </div>
          )
        });

return (
      <div className="App">

        <nav className="navbar navbar-dark bg-dark">
          <a className="navbar-brand" href="/">
            Tasks
            <span className="badge badge-pill badge-light ml-2">
              {this.state.todos2.length} 
            </span>
          </a>
        </nav>

        <div className="container">
          <div className="row mt-4">

            <div className="col-md-4 text-center">
                <img src={logo} className="App-logo" alt="logo" />
                {/* <TodoForm onAddTodo={this.handleAddTodo} ></TodoForm> */ }
                {this.state.mode === 'view' ? (
                   <TodoForm onAddTodo={this.handleAddTodo} />
                ) : (
                  <TodoFormEdit index={this.state.i}/>
                )}
            </div>

            <div className="col-md-8">
              <div className="row">
                {todosAll}
              </div>
            </div>


          </div>
        </div>


      </div>
    )

  }
}

export default App;

和“编辑”组件：

    import React, { Component } from 'react';

// data
import { todos2 } from '../todos.json';

class TodoFormEdit extends Component {

  constructor (i) {
    super(i);
    this.state = {
      todos2
    };



  }

  render() {



      return (

        <div>
          {this.state.todos2[0].title}
        </div>

      )



  }

}

export default TodoFormEdit;

Answer 1

您正在通过this.state.i：

<TodoFormEdit index={this.state.i}/>

不清楚您在哪里设置它-我看到mode和todos2状态属性，我看不到i的任何地方。

通过反应组件传递索引

1 个答案: