如何在当前和以前的日子里点击按钮，但在未来的日子里不点击

Question

我目前正在尝试使用按钮来更改单击时ToDo的完成情况，但我只想启用前几天和当前一天的按钮。

例如，假设今天是星期三，那么我希望我的按钮在星期一、星期二和星期三启用，但在以后的日子不启用。

在我的API中，我无法获得要发送的天数，只有当天的id。所以Sun: 1 ... Sat:7，我想不出办法做到这一点。

这是今天是星期天的代码片段，所以按钮应该被启用，但在剩下的日子里它被禁用了，这只是我试图实现的一个想法。

<div key={day.id}>
  {habit.id === day.habitId && (
    <>
      {firstDay === "Sun" && day.id === 1 ?
        <form onSubmit={onSubmit}>
          {!day.isCompleted ? 
            <button type="submit" onClick={() => {setHandleChange([day.id, day.isCompleted]); setCompletion(!day.isCompleted)}}>[]</button>
            : <button style={{ color: habit.color }} type="submit" onClick={() => setHandleChange([day.id, day.isCompleted])}>[]</button>
          }
        </form>
        : <button disabled type="submit" onClick={(e) => {  setHandleChange([day.id, day.isCompleted]); setCompletion(e.target.value) }}>[]</button>
      }
    </>
  )}
</div>

CCD_ 2是通过操纵CCD_ 3得到的，因此它是一个动态变量。我如何使这个想法变得动态，这样，如果day.id === 7，那么所有的按钮都可以点击，如果day.id === 1，那么只有Sun的按钮可以点击；如果day.id === 3，那么Sun, Mon and Tue可以点击，但不能点击其余的按钮？

Answer 1

您可以保留一个日期名称数组，然后使用getDay来获取"今天"；。然后在天数组上迭代，并且如果当前map索引大于"0"的索引；今天"；禁用按钮。

function Example() {
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const today = new Date().getDay();
  function handleClick(e) {
    const { dataset: { day } } = e.target;
    console.log(day);
  }
  function isDisabled(i) {
    return i > today;
  }
  return (
    <div>
      {days.map((day, i) => {
        return (
          <button
            data-day={day}
            type="button"
            onClick={handleClick}
            disabled={isDisabled(i)}
          >{day}
          </button>
        )
      })}
    </div>
  );
};
ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>