javascript - 通过反应组件传递索引

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;

标签： javascriptreactjs

Answer 1

你正在传递this.state.i：

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

不清楚你在哪里设置它——我看到mode并todos2声明了属性，我在任何地方都看不到i。