javascript - 如何在响应中将列表项更改为输入以进行编辑功能？

我开始学习React，并列出了待办事项 list 。具有添加，删除，拖放和编辑功能。

对于我的编辑，我采用列表项字符串并将其放在用于添加的输入中，如果再次按添加，则更改列表项。我想重写该功能。我想将列表项转换为输入，当我再次按下按钮时，我想用该输入替换列表项的值。

我应该使用像Javascript这样的隐藏输入吗？我不确定是否可以显示/隐藏react中的元素。还是应该创建一个切换方法？

这是我的HTML代码:

<div id="app"> </div>

这是我的ReactJS代码:

import React, { Component } from 'react';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const data=[];

const ListItem = SortableElement(({item,i,editTask,deleteTask}) => (
     <div className='list-item'>
     <p>{item.title}

    <button className='button-edit'
    onClick={()=> editTask(item,i)}>Edit </button>
    <button className='button-delete'
    onClick={()=> deleteTask(item,i)}>Delete </button>
    </p>
    </div>
));

var toggle = false;
const List= SortableContainer(({editTask,deleteTask}) => {
 var items = data.map((item,i) => (
        <ListItem
            item={item}
            index={i}
            editTask={editTask}
            deleteTask={deleteTask}
            key={i}
        />
    ));

    return (
        <div>
        {items}
        </div>
  );
});

class App extends React.Component {
    constructor (props) {
        super(props);
        this.updateTask = this.updateTask.bind(this);
        this.editTask = this.editTask.bind(this);
        this.deleteTask = this.deleteTask.bind(this);
        this.addTask = this.addTask.bind(this);
        this.state = {
            taskName:'',
            data: [],
            toggle: true
        };
    }


    updateTask(e){
        this.setState({taskName:e.target.value});
    }


    addTask(e){
        e.preventDefault();
        if(!this.state.taskName){
            return;
        }
      data.push({
            title: this.state.taskName
        });
        this.state.taskName='';
        this.setState(this.state);
    }

    editTask(task,i){

    this.state.taskName =task.title;
    this.state.data.splice(i,1);
    this.setState(this.state);
    }

    deleteTask(i){
     data.splice(i,1);
       this.setState(this.state);
    }


  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
     data: arrayMove(this.state.data, oldIndex, newIndex),
    });
  };

    render(){
        return (
            <div>

            <h> To do List: </h>
            <form onSubmit={this.addTask}>
            <input type='text' placeholder='Task'
            value={this.state.taskName}
            onChange={this.updateTask} />
            <input type='submit' className='buttonAdd' value='Add' />
            </form>

          <List
             editTask={this.editTask}
          deleteTask={this.deleteTask}
          onSortEnd={this.onSortEnd} />


        </div>

        );
    }
}

export default App;

最佳答案

您可以使用conditional rendering隐藏/显示react中的元素。

基本上，您可以利用状态和更新重新呈现组件的事实，以便可以呈现ListItem或Input。

这是我制作的一个示例:https://codesandbox.io/s/J6ynwlOq9
告诉我您是否需要代码示例。

关于javascript - 如何在响应中将列表项更改为输入以进行编辑功能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45347305/