Question

这是一个简单的待办事项应用程序，内置了react，Bulma和CSS网格。当我在Chrome中重新加载页面时，输入表单的高度从385x27.27更改为385x58.45，并将其降低到突破CSS网格底部边界的程度。我认为这与我的React代码没有太大关系，因为我在没有这个问题的firefox和edge中测试了我的应用程序。

我还尝试清除Chrome的缓存，Cookie等，但无法解决该问题。出人意料的是，只要在输入框中键入内容（只需键入），它就会自动将其固定为适当的比例。但是，一旦刷新，它就会再次中断。我还应该注意，它在页面的第一次渲染时就损坏了（不仅仅是刷新）。

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

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

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

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;
}

待办事项应用程序的界面仅在刷新时在Chrome浏览器中中断

0 个答案: