ReactJS 和继承

Question

我正在尝试对分层组件实施删除功能。它是 app.jsx > notes.jsx > note.jsx。这只是制作一个简单的待办事项列表，我是从教程中得到的。我已经用 babel 加载了它，但很难理解为什么这会删除整个待办事项列表而不是只删除一个列表元素。

App.jsx :

import React from 'react';
import Note from './Note';
import Notes from './Notes';

export default class App extends React.Component {
    constructor(props) {
    super(props);

    this.state = {
      notes: [{
        task: 'Learn webpacks'
      }, {
        task: 'Learn React'
      }, {
        task: 'Do laundry'
      }]
    };
  }


    render() {
        var notes = this.state.notes;
        return (
          <div>
            <button onClick= {()=>this.addItem()}> + </button>
            <Notes items = {notes}
            onEdit = {(i, task) => this.itemEdited(i, task)} 
            removeItem = {(i) => this.removeItem(i)} 
             />

            </div>
            );  
    }

    itemEdited(i, task) {
    var notes = this.state.notes;

    if(task) {
      notes[i].task = task;
    }
    else {
      notes = notes.slice(0, i).concat(notes.slice(i + 1));
    }

    this.setState({
      notes: notes
    });
  }


    addItem() {
        this.setState({
        notes : this.state.notes.concat([{
            task : 'New Task'
        }])

        });
    }

    removeItem(i) {
    var notes = this.state.notes;
    this.setState({
        notes : this.state.notes.slice(0, i)
    });
    }
}

Notes.jsx

import React from 'react';
import Note from './Note';

export default class Notes extends React.Component {
    render() {
        var notes = this.props.items;

        return(
        <ul className='notes'>{notes.map((note, i) =>
            <li className = 'note' key = {'note' + i}>
                <Note value = {note.task}
                 onEdit = {this.props.onEdit.bind(null, i)}
                 removeItem = {this.props.removeItem.bind(null, i)}
                 /> 


            </li>
            )}</ul>
        );
    }
}

Note.jsx

import React from 'react';

export default class Note extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
        edited: false
        };
    }

    render() {
        const {value, onEdit, ...props} = this.props;
        var edited = this.state.edited;

            return (
                <div {...props}> {
                    edited
                    ? <input type = 'text'
                      defaultValue = {value}
                      onBlur = {(e) => this.finishEdit(e)}
                      onKeyPress={(e) => this.checkEnter(e)}/>
                    : <div onClick={() => this.edit()}> {value} </div>
                }
                <button onClick = {(i) => this.props.removeItem(i
            )}>-</button>  
                </div>

            );
        }

        edit() {
        this.setState({edited: true});
        }

        checkEnter(e) {
        if(e.key === 'Enter') {
          this.finishEdit(e);
            }
        }

        finishEdit(e) {
        this.props.onEdit(e.target.value);
        this.setState({edited:false});
        }



}

一切正常，但删除单个列表元素，而不是删除元素，而是删除整个列表。我认为这与传递 removeItem 的逻辑有关，但我不知道到底要传递什么。我看到它的方式，注意是单个 note/list 元素，所以为了删除它，函数必须滴入这个 class 对吗？

编辑：尝试我认为它应该如何工作。

Answer 1

出了问题的是 1：未将 null 绑定到 this.props.removeItem.bind(i)

其次，当我打算做的是拼接它时，我正在切片整个东西，但我只是这样做了：

removeItem(i) {
    var notes = this.state.notes;
    notes = notes.slice(0, i).concat(notes.slice(i + 1));
    this.setState({
        notes : notes
    });
    }

获取该列表之前的所有元素并将其与之后的所有元素连接起来。虽然 notes = notes.splice(i, 1) 也应该工作正确？我试过了，但它会删除除该元素以外的所有内容。

ReactJS 和继承

ReactJS and inheritance

javascript

reactjs

webpack

babeljs