Интерфейс приложения todo ломается только в браузере Chrome, при обновлении - PullRequest
Новая
       19

Интерфейс приложения todo ломается только в браузере Chrome, при обновлении

0 голосов
/ 30 мая 2019

Это простое приложение, созданное с использованием реагирования, бульмы и сетки CSS. Когда я перезагружаю страницу в Chrome, высота формы ввода изменяется с 385x27,27 до 385x58,45 и опускается до точки пробития нижней границы моей сетки CSS. Я не думаю, что это во многом связано с моим кодом реакции, так как я тестировал свое приложение в Firefox и Edge, у которых не было этой проблемы.

Я также попытался очистить кэш, куки и т. Д. Для хрома, что не помогло решить проблему. Удивительно, но как только вы вводите что-то в поле ввода (просто печатаете), оно фиксируется в правильных пропорциях. Но как только вы освежитесь, оно снова сломается. Я также должен отметить, что он не работает при первом рендеринге страницы (а не только при обновлении).

Я подозреваю, что это связано с моей сеткой и с тем, как я обернул элементы html (я все еще учусь), или, может быть, event.prevent.default () и .reset () внутри моего кода реакции мешают работе с сеткой? Я действительно не уверен, и без сообщений об ошибках это было трудно устранить. Я включил полный код для моего приложения ниже и изображения проблемы.


Страница сначала загружена или обновлена ​​(не работает)

Page first loaded

Страница после ввода «p» на входе (правильно)

Page after typing


Index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>


App.js 

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



/* InputTaskForm renders a form, and returns the input to our storeTask method. */
const InputTaskForm = ({ formValidation }) => { 
    return (                                      
      <form name="charlie" className="charlie" onSubmit={formValidation}>
        <input name="userinput" type="text" placeholder="Task..." size="35"/> 
        <button className="button is-info is-small" type="submit">Submit</button>
      </form>
    );
}

const DisplayTasks = ({ tasksArray, removeTask, crossOutTask }) => { 
  return (
    <div id="orderedList">
      <ol>

        {/* Create our list items and corresponding buttons by mapping over the tasks array. The array is currently made up of objects with a title and crossedOut key. Therefore keep in mind the task prop is carrying objects, not the task title itself */}
        {tasksArray.map((task, index) => (                            
          <li onClick={ () => crossOutTask(index) } key={index} >

            {/* Check the crossedOut value of the current task object. If crossedOut is true display it crossed out, else display it uncrossed */}
            { task.crossedOut                                         
              ? <strike>{task.title}</strike> 
              : task.title }

            <button className="removeButton button is-danger is-small" onClick={ event => removeTask(event, index) } >Remove</button>
          </li>
        ))}

      </ol>
    </div>
  );
};



class App extends Component {
  state = {
    userinput: '',
    tasksarray: [],                               
  }


/* ============================================== #FUNCTIONS ============================================== 
=========================================================================================================== */
formValidation = event => {                                       // event prop passed from InputTaskForm component
  event.preventDefault();                                         // prevent form from auto-refreshing on submit
  const userInput = event.target.userinput.value                  // userInput stored
  const userInputIsBlank = userInput.trim().length < 1            // trim (remove) prefixed and affixed spaces, then check length

  userInputIsBlank 
    ? alert(`Error: invalid submission`) 
    : this.storeTask(userInput);
};

storeTask = userInput => {                                         // userInput passed from formValidation function
    this.setState({
      userinput: userInput,
      tasksarray: [...this.state.tasksarray, { title: userInput, crossedOut: false } ] //create a copy of tasks array then add a new object into the array filled out with user input
    });
    document.forms["charlie"].reset();
};


removeTask = (event, index) => {                                    // props passed from DisplayTasks component
  event.stopPropagation();                                          // prevents bubbling to crossOutTask in the DisplayTask component
  const removedTaskArray = [...this.state.tasksarray];              //removedTaskArray is just a copy of our current array for the moment

  removedTaskArray.splice(index, 1);                                //here removedTaskArray actually becomes an array w/ the removed task (removed with splice)                 
  this.setState({ tasksarray: removedTaskArray });   
};


crossOutTask = index => {                                           // index prop passed from DisplayTasks component
  const { tasksarray } = this.state
  const selected = tasksarray[index];

  this.setState({                                           
    tasksarray: [                                                   // change tasksarray state to: [prior slice, change, after slice]
      ...tasksarray.slice(0, index),                                // slice off (copies) of array elements prior to index element
      Object.assign(selected, {crossedOut: !selected.crossedOut}),  // invert the selected line's crossedOut value
      ...tasksarray.slice(index + 1)                                // slice off (copies) of array elements after index element
    ]
  });
};


componentDidUpdate() {
  console.log(this.state.tasksarray);                               // debugging :) 
};


/* =============================================== #RENDER ================================================ 
=========================================================================================================== */
  render() { 
    const { tasksarray } = this.state
    const { formValidation, storeTask, removeTask, crossOutTask } = this

    return (
      <div className="grid-container">

        <div className="input-tasks-container box">
          <h1 className="title is-4">Todo: </h1>
          <InputTaskForm 
            task={storeTask}
            formValidation={formValidation} />
          </div>

        <div className="tasks-grid-container">
          <h1 className="Tasks-title title is-4">Tasks</h1>
          <h1 className="Tasks-title subtitle is-6">Tip: click on a task to mark it as done</h1>
            <DisplayTasks 
              tasksArray={tasksarray} 
              removeTask={removeTask} 
              crossOutTask={crossOutTask} />
        </div>
      </div>
      );
    };
};


/* ================================================ #EXPORT =============================================== 
=========================================================================================================== */
export default App;


App.css 

/* Prevent highlighting when double clicking list items */
#orderedList {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */    
  cursor: pointer;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 425px 1fr 1fr;
  grid-template-rows: 200px 1fr;
}

.input-tasks-container {
  margin-top: 45px;
  text-align: center;
  display: grid;
  grid-column-start: 3;
}

.Tasks-title {
  margin-top: 20px;
}
.tasks-grid-container {
  display: grid;
  grid-row-start: 2;
  grid-column-start: 3;
  grid-column-end: 5;
}

.removeButton {
  margin-left: 10px
}

button {
  cursor: pointer;
}

.charlie {
  margin-bottom: 20px;
}

li {
  margin-bottom: 10px;
}

ol {
  margin-left: 40px;
}
...