小编Dav*_*e.Q的帖子

我正在使用React Sortable HOC来移动项目。我的初始状态是一个空数组，我需要使用React Sortable中的函数更新状态。

这是React Sortable HOC的原始代码片段

onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };

我的状态和功能看起来像这样

const [colors, setColors] = useState([])

function onSortEnd({ oldIndex, newIndex }) {
  setColors([...colors, ({ colors }) => ({
     colors: arrayMove(colors, oldIndex, newIndex)
  })]);
};

最终发生的是没有错误，但是当我尝试排列任何现有颜色时，会添加更多颜色。

我已经用 Vue 工作了 24 小时，所以请原谅我的无知。我已经四处搜索，我正在接近，但我确定这是我缺乏理解和基本原则。

我有一个在单击按钮时打开的模式。此模式显示带有电子邮件输入的表单。我设法使模式正常工作，但是当我输入错误的电子邮件时没有任何反应。

这是我的组件代码：

<template>
<div>
  <!-- Aside -->
  <aside class="aside">
    <button class="aside__btn button" @click="showModal = true">
      Send Me The Tips
    </button>
  </aside>

  <!-- Modal -->
  <div class="modal" v-if="showModal">
    <div class="modal-container">
      <a href="#" class="close" @click="showModal = false"></a>

      <p class="modal__steps">Step 1 of 2</p>
      
      <div class="relative">
        <hr class="modal__divider" />
      </div>

      <div class="modal__heading-container">
         <p class="modal__heading">Email Your Eail To Get <span class="modal__heading-span">Free</span>
         </p>
         <p class="modal__heading">iPhone Photography Email Tips:</p>
      </div>

      <form> 
        <input for="email" type="email" placeholder="Please enter your email here" required v-model="email">
        <span …