React. js - кнопка редактирования списка TODO не работает

Question

Я новичок в React. js и пытаюсь создать список TODO. У меня есть две кнопки для редактирования и удаления. Кнопка удаления работает нормально, но не кнопка редактирования. Я испытываю трудности с кнопкой «Изменить». Когда я нажимаю кнопку редактирования, я хочу, чтобы текстовое поле было редактируемым. Затем я могу редактировать, и когда я вхожу, он должен быть обновлен.

У меня тоже есть проблема css с выравниванием кнопок. Пожалуйста, помогите мне с этим.

Приложение. 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

Кнопка редактирования не работает, потому что вы используете edit.target.value, который не существует. В моем понимании, вы пытаетесь получить доступ к тексту, так что это будет oneTask.text.

Вот файл:

Приложение. 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;

Я также манипулировал кодом задачи редактирования, к которому можно вернуться обратно используйте ваш код.

Вот рабочая ссылка: https://codesandbox.io/s/gifted-almeida-uivq0

Надеюсь, это поможет!

Answer 2

Итак, я предполагаю, что это представление todo и по умолчанию оно отключено. Вы можете использовать переменную состояния, чтобы включить текстовые поля при нажатии на кнопку редактирования. Добавьте обработчик для редактирования события нажатия кнопки и внутри этой переменной состояния изменения обработчика. Поэтому реакция будет включать эти два текстовых поля на основе этого события.

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>