如何使数组可编辑

Question

I want to make the lists inside the ul editable. But I have no idea how to do it. I have the delete functionality working but not editing. It works as so at the moment. I write something into the input and it adds it to the list and by clicking it deletes, but I need an edit function to it.

This is a simple to-do list I'm working on

**TodoItems.js**
import React, { Component } from 'react';

class TodoItems extends Component {
    constructor(props) {
        super(props);
        this.createTasks = this.createTasks.bind(this);
    }
    createTasks(item) {
        return (
          <div>
            <li
              onClick={() => this.delete(item.key)}
              key={item.key}
            >
              {item.text}
            </li><p onClick={() => this.edit(item.key)}>Edit</p>
          </div>
        )
    }

    delete(key) {
        console.log("Key is: " + key);
        this.props.delete(key);
    }

    edit(key) {
        this.props.edit(key);
    }

    render() {
        var todoEntries = this.props.entries;
        var listItems = todoEntries.map(this.createTasks)

        return (
            <ul className="theList">
                {listItems}
            </ul>
        )
    }
}

TodoList.js

export default TodoItems;

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

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

        this.state = {
            items: []
        };
        this.addItem = this.addItem.bind(this);
        this.deleteItem =  this.deleteItem.bind(this);
    }

    addItem(e) {
        if (this._inputElement.value !== "") {
            var newItem = {
                text: this._inputElement.value,
                key: Date.now()
            };

            this.setState((prevState) => {
                return {
                    items: prevState.items.concat(newItem)
                };
            });
        }

        this._inputElement.value = "";

        console.log(this.state.items);

        e.preventDefault();
    }

    deleteItem(key) {
        console.log("Key is deleteItem:" + key);
        console.log("Items at delete: " + this.state.items);
        var filteredItems = this.state.items.filter(function (item){
            return (item.key !== key)
        });

        this.setState({
            items: filteredItems
        });
    }

    editItem(key) {

    }

    render() {
        return (
            <div className="todoListMain" >
                <div className="header">
                    <form onSubmit={this.addItem}>
                        <input ref={(a) => this._inputElement = a}
                            placeholder="enter task">
                        </input>
                        <button type="submit">add</button>
                    </form>
                </div>
                <TodoItems entries={this.state.items}
                            delete={this.deleteItem}/>
            </div>
        )
    }
}

export default TodoList;

Answer 1

The problem can be solved by using the contentEditable Property of HTML elements. It also requires two buttons Edit/Done and a delete button. When Edit is selected the list item becomes editable and changes can be made. Upon clicking on done the changes are saved in the state items.

class TodoItems extends Component {
constructor(props) {
super(props);
this.createTasks = this.createTasks.bind(this);
this.state = {showEditButton:true}
}
createTasks(item) {
   return 
   <div><li key={item.key}  contentEditable={item.editable}> {item.text} </li>
     <p onClick={() => this.delete(item.key)}>Delete</p>
      {this.state.showEditButton?<p onClick={() => this.edit(item.key)}>Edit</p>:<p onClick={() => this.done(item.key)}>Done</p>}
   </div>
   }

delete(key) {
console.log("Key is: " + key);
this.props.delete(key);
}

edit(key) {
this.props.edit(key);
this.setState({showEditButton:false})
}
done(key){
this.props.done(key);
this.setState({showEditButton:true})
}

render() {
var todoEntries = this.props.entries;
var listItems = todoEntries.map(this.createTasks)

return (
    <ul className="theList">
        {listItems}
    </ul>
 )
 }
}

The TodoList component is altered as follows

class TodoList extends Component {
 constructor(props) {
 super(props);
 this.state = {
    items: []
  };
this.addItem = this.addItem.bind(this);
this.deleteItem =  this.deleteItem.bind(this);
this.editItem = this.editItem.bind(this);
this.doneItem = this.doneItem.bind(this);
}

addItem(e) {
  if (this._inputElement.value !== "") {
    var newItem = {
        text: this._inputElement.value,
        key: Date.now(),
        editable:false
    };

    this.setState((prevState) => {
        return {
            items: prevState.items.concat(newItem)
        };
    });
 }

this._inputElement.value = "";

console.log(this.state.items);

e.preventDefault();
}

deleteItem(key) {
var filteredItems = this.state.items.filter(function (item){
    return (item.key !== key)
});

 this.setState({
    items: filteredItems
});
}

editItem(key) {

 var itemsCopy = this.state.items;
 itemsCopy.map(h=>{if(h.key==key)h.editable=true})
 this.setState({items:itemsCopy})
}
doneItem(key){

var itemsCopy = this.state.items;
itemsCopy.map(h=>{if(h.key==key)h.editable=false})
this.setState({items:itemsCopy})
}

render() {
return (
    <div className="todoListMain" >
        <div className="header">
            <form onSubmit={this.addItem}>
                <input ref={(a) => this._inputElement = a}
                    placeholder="enter task">
                </input>
                <button type="submit">add</button>
            </form>
        </div>
        <TodoItems entries={this.state.items}
           delete={this.deleteItem} edit={this.editItem} done={this.doneItem}/>
    </div>
   )
 }
}

Answer 2

You should add another one component, lets call it TodoItem , so you could manage state individually in every item. Add couple of events to handle input change when editing name, and that's all.

Also it is not recommended that one of your props is called key , because it's used by React.js internally for detecting if one of element in collection were being changed.

Also div elements are not allowed as child of ul so I advice you to replace ul with div .

Example

 let Component = React.Component; // New component class TodoItem extends Component { constructor(props) { super(props); this.state = { editMode: false } } onClickEdit = () => { this.setState({ editMode: true }) } onSubmit = (e) => { e.preventDefault(); let value = this.refs.input.value; this.props.edit(this.props.id, value); this.setState({editMode: false}) } render(){ let props = this.props; return ( <div> {!this.state.editMode && <span onClick={() => this.props.delete(props.id)}>{props.text}</span>} {this.state.editMode && <form onSubmit={this.onSubmit}> <input type='text' ref='input' defaultValue={props.text} /> </form>} <p onClick={this.onClickEdit}>Edit</p> </div> ) } } class TodoItems extends Component { constructor(props) { super(props); this.createTasks = this.createTasks.bind(this); this.state = { editMode: false } } createTasks(item) { return <TodoItem key={item.id} {...item} edit={this.edit} delete={this.delete}/>; } delete = (key) => { console.log("Key is: " + key); this.props.delete(key); } edit = (key, newValue) => { this.props.edit(key, newValue) } render() { var todoEntries = this.props.entries; var listItems = todoEntries.map(this.createTasks) return ( <div className="theList"> {listItems} </div> ) } } class TodoList extends Component { constructor(props) { super(props); this.state = { items: [] }; this.addItem = this.addItem.bind(this); this.deleteItem = this.deleteItem.bind(this); } addItem(e) { if (this._inputElement.value !== "") { var newItem = { text: this._inputElement.value, id: Date.now() }; this.setState((prevState) => { return { items: prevState.items.concat(newItem) }; }); } this._inputElement.value = ""; console.log(this.state.items); e.preventDefault(); } deleteItem(key) { console.log("Key is deleteItem:" + key); console.log("Items at delete: " + this.state.items); var filteredItems = this.state.items.filter(function (item){ return (item.id !== key) }); this.setState({ items: filteredItems }); } editItem = (id, newValue) => { let newItems = [].concat(this.state.items); let item = newItems.find(i=>i.id == id); item.text = newValue; this.setState({items: newItems}); } render() { return ( <div className="todoListMain" > <div className="header"> <form onSubmit={this.addItem}> <input ref={(a) => this._inputElement = a} placeholder="enter task"> </input> <button type="submit">add</button> </form> </div> <TodoItems entries={this.state.items} edit={this.editItem} delete={this.deleteItem}/> </div> ) } } ReactDOM.render(<TodoList />, document.querySelector('#app')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>