时间戳

首页 > 解决方案 > 待办事项应用程序界面仅在 chrome 浏览器中中断，刷新时

css - 待办事项应用程序界面仅在 chrome 浏览器中中断，刷新时

问题描述

这是一个使用 react、bulma 和 css grid 构建的简单 todo 应用程序。当我在 chrome 中重新加载页面时，输入表单的高度从 385x27.27 变为 385x58.45，并降低到突破我的 CSS 网格底部边界的点。我认为这与我的反应代码没有太大关系，因为我在 firefox 和 edge 中测试了我的应用程序，没有这个问题。

我还尝试为 chrome 清除缓存、cookie 等，但没有解决问题。令人惊讶的是，只要您在输入框中输入某些内容（只需输入），它就会自行固定到适当的比例。但是，一旦您刷新，它就会再次中断。我还应该注意到它在页面的第一次渲染时被破坏了（不仅仅是刷新）。

我怀疑这与我的网格以及我如何包装 html 元素（我仍在学习）有关，或者我的反应代码中的 event.prevent.default() 和 .reset() 可能会干扰网格？我真的不确定，如果没有错误消息，这很难解决。我在下面包含了我的应用程序的完整代码和问题的图像。


页面首次加载或刷新（损坏）

首次加载的页面

在输入中输入“p”后的页面（正确）

输入后的页面


索引.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>


应用程序.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;


应用程序.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;
}

标签： cssreactjsgoogle-chromecss-grid

解决方案

推荐阅读