javascript - 如何将列表项更改为 react 中编辑功能的输入？

Question

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

对于我的编辑，我获取列表项字符串并将其放置在用于添加的输入中，如果我再次按添加，我的列表项就会更改。我想重写这个函数。我想将列表项转换为输入，当我再次按下按钮时，我想用该输入替换列表项值。

我应该使用像 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;

Answer 1

您可以使用 conditional rendering 在 React 中隐藏/显示元素.

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

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