React.js - TODO 列表编辑按钮不起作用

Question

我是 React.js 的新手，正在尝试创建一个 TODO 列表。我有两个用于编辑和删除的按钮。删除按钮工作正常，但不是编辑按钮。我很难使用“编辑”按钮。当我点击编辑按钮时，我希望文本框是可编辑的。然后我可以编辑，当我输入时，它应该会更新。

我也有一些 css 按钮对齐问题。请帮我解决这个问题。

App.js

import React from 'react';
import './App.css';
import './AddedTasks.css'
import uuid from 'uuid'

class App extends React.Component{

   constructor(props){
    super(props);
    this.state = {
        task:[],
        currentTask:{
            text:'',
            key:''
        }
    }
    this.addTask = this.addTask.bind(this);
    this.editTask = this.editTask.bind(this);
    this.deleteTask = this.deleteTask.bind(this);
    this.handleInput = this.handleInput.bind(this);
}
addTask(event){
    event.preventDefault();
    const newItem = this.state.currentTask;
    if(newItem.text !==""){
        const items = [...this.state.task, newItem];
        this.setState({
            task: items,
            currentTask:{
                text:'',
                key:''
            },
        })
    }
}
editTask(text,key) {
    //console.log("items:"+this.state.task);
     const items = this.state.task;
     items.map(item=>{
         if(item.key===key){
             //console.log(item.key +"    "+key)
             // item.text= text.title;
         }
     })
     this.setState({
         task: items,
     })
}
deleteTask(key){
    const currentTaskArray = [...this.state.task]
    const taskAfterDeleted = currentTaskArray.filter(deletedTask => deletedTask.key !== key);
    this.setState({
        task:taskAfterDeleted
    })
}
handleInput(event){
    this.setState({
        currentTask:{
            text: event.target.value,
            key: uuid()
        }
    })
}
render(){
  return(
      <div className='Todo'>
          <h1> MyTaskList </h1>
          <form id="todo-list" onSubmit={this.addTask}>
              <input type="text" className="textInput" placeholder="Enter Item" value={this.state.currentTask.text} onChange={this.handleInput}/>
              <button type ="submit">Add</button>
          </form>
          {this.state.task.map(oneTask=>(
              <div className="card">
                  <div className="container">
                      <p>{oneTask.text}
                        <div>
                            <button className="w3-button delete" onClick={()=> this.deleteTask(oneTask.key)}><i className="fa fa-trash"/></button>
                              <button className="w3-button edit" onClick={(edit)=>this.editTask(edit.target.value,oneTask.key)}><i className="glyphicon glyphicon-pencil"/></button>
                        </div>
                      </p>
                  </div>
              </div>
          ))}
      </div>
    );
   }
  }
  export default App;


  App.css
 _______________

body{
 background-color: lightblue;
 background-image: url("./todolist.jpg");
 background-repeat: no-repeat;
 background-size: cover;
 alignment: center;
 padding-top: 40px;
}
 h1{
    text-align: center;
    color: #bf6318;
    padding-right: 17px;
}
.Todo{
    background-color: #c1b2cd;
    min-height: 500px;
    width: 500px;
    margin: 150px;
    padding-left: 20px;
    background-image: url("./pin.jpg");
    background-size: 80px;
    background-repeat: no-repeat;
  }
  #todo-list input{
      background-color: rgb(95, 83, 135);
      border: 0;
      width: 250px;
      height: 50px;
      padding: 0 20px;
      margin: 20px;
      font-size: 18px;
      border-radius: 10px;
      color: #ffffff;
   }
   #todo-list input::placeholder{
      color: rgba(255,255,255,0.5);
   }
   button{
       background-color: #008CBA;
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
       margin: 4px 2px;
       cursor: pointer;
      -webkit-transition-duration: 0.4s; /* Safari */
       transition-duration: 0.4s;
       box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
   }


  AddedTask.cs
  _________________


  .card {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     width: 70%;
     border-radius: 5px;
     margin-bottom: 10px;
     margin-left: 20px;
     background-color: #bf826b;
  }
  .card:hover {
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  .container {
     padding: 4px 16px;   /*input/card field*/
     height: 40px;
  }
 .container button.edit{
      color: #bf6318;
      margin-left: 80px;
      margin-right: 10px;
  }
  .container button.delete{

   }

Answer 1

所以我假设这是待办事项的视图，默认情况下它是禁用的。您可以使用状态变量在单击编辑按钮时启用文本框。添加一个处理程序来编辑按钮单击事件，并在此处理程序中更改状态变量。因此 React 将根据该事件启用这两个文本框。

this.state = {
isEditable:false // by defualt this is disables
}

editHandler(){
//change isEditable to true
}

确保在构造函数中绑定这个新方法。然后将其添加到按钮单击事件中。基于 isEditable 使您的表单控件启用或禁用。

关于 CSS，只需使用新的 div 元素，并在 div 中包含两个按钮。所以它不会出现在文本框的顶部。

<div>
  <div>text box and button</div>
  <div>second row</div>
  <div>edit and delete button></div>
</div>

Answer 2

编辑按钮不起作用，因为您使用的 edit.target.value 不存在。据我了解，您正在尝试访问文本，因此它将是 oneTask.text。

这是文件：

App.js

import React from "react";
import "./styles.css";
import uuid from "uuid";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      task: [],
      currentTask: {
        text: "",
        key: ""
      }
    };
    this.addTask = this.addTask.bind(this);
    this.editTask = this.editTask.bind(this);
    this.deleteTask = this.deleteTask.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }
  addTask(event) {
    event.preventDefault();
    const newItem = this.state.currentTask;
    if (newItem.text !== "") {
      const items = [...this.state.task, newItem];
      this.setState({
        task: items,
        currentTask: {
          text: "",
          key: ""
        }
      });
    }
  }
  editTask(text, key) {
    //console.log("items:"+this.state.task);
    const items = this.state.task;

    this.setState({
      task: items.filter(item => item.key !== key),
      currentTask: {
        text
      }
    });
  }
  deleteTask(key) {
    const currentTaskArray = [...this.state.task];
    const taskAfterDeleted = currentTaskArray.filter(
      deletedTask => deletedTask.key !== key
    );
    this.setState({
      task: taskAfterDeleted
    });
  }
  handleInput(event) {
    this.setState({
      currentTask: {
        text: event.target.value,
        key:uuid()
      }
    });
  }
  render() {
    return (
      <div className="Todo">
        <h1> MyTaskList </h1>
        <form id="todo-list" onSubmit={this.addTask}>
          <input
            type="text"
            className="textInput"
            placeholder="Enter Item"
            value={this.state.currentTask.text}
            onChange={this.handleInput}
          />
          <button type="submit">Add</button>
        </form>
        {this.state.task.map(oneTask => (
          <div key={oneTask.key} className="card">
            <div className="container">
              <p>
                {oneTask.text}
                <div>
                  <button
                    className="w3-button delete"
                    onClick={() => this.deleteTask(oneTask.key)}
                  >
                    Delete
                  </button>
                  <button
                    className="w3-button edit"
                    onClick={() => this.editTask(oneTask.text, oneTask.key)}
                  >
                    Edit
                  </button>
                </div>
              </p>
            </div>
          </div>
        ))}
      </div>
    );
  }
}
export default App;

我还操纵了编辑任务代码，您可以恢复使用您的代码。

这是工作 link：https://codesandbox.io/s/gifted-almeida-uivq0

希望对您有所帮助！

React.js - TODO 列表编辑按钮不起作用

React.js - TODO List edit button not working

javascript

css

reactjs

edit