02-Date Counter

Challenge #1 Date Counter

在codesandbox上运用state实现date counter功能。

(1)实现界面及功能

功能

第一行按钮可实现对Step的加减1位；第二行按钮可实现对Count的加减step位；第三行会显示距今的过去和未来的天数，和Count有关，Count=0，今天；Count>0,未来；Count<0,过去。

(2)实现代码及思路

import "./styles.css";
import { useState } from "react";//写入useState后enter会自动添加，若无需手动添加

export default function App() {//输出默认函数
  return (
    <div className="App">      //需要添加css中App类
      <Counter />              //调用Counter组件
    </div>
  );
}

function Counter() {           //定义一个Counter组件
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  const date = new Date();      //new Date()会返回当前日期和时间
  date.setDate(date.getDate() + count);
 //getDate返回date中日期数值，如11月28日，返回28，setDate设置date的日期部分，若count=5，28+5=33，setDate会计算出新的日期

  return (
    <div>
      <div>
        <button onClick={() => setStep((c) => c - 1)}>-</button>
        Step:{step}
        <button onClick={() => setStep((c) => c + 1)}>+</button>
      </div>

      <div>
        <button onClick={() => setCount((c) => c - step)}>-</button>
        Count:{count}
        <button onClick={() => setCount((c) => c + step)}>+</button>
      </div>

      <p>
        <span>
          {count === 0
            ? "Today is "
            : count > 0
            ? `${count} days from today is `
            : `${Math.abs(count)} days ago was `}//取绝对值
        </span>
        <span>{date.toDateString()}</span>
      </p>
    </div>
  );
}

（1）状态state使用场景

（2）在函数组件中使用useState钩子

const [state, setState] = useState(initialValue)：定义一个状态变量 state 和更新该状态的函数 setState，initialValue 为初始值。

使用 setState 来更新状态。

（3）采用setState的回调方式

①确保基于最新状态进行更新；

②避免直接修改状态，React不建议直接修改状态变量值；

setStep(step-1);
setStep(step-1);
//上面两行代码都基于相同初始状态执行，执行结果相同，导致无法对step进行减2次操作
setStep((c)=>c-1);
setStep((c)=>c-1);
//采用函数回调方式，可以保证第二行在第一行基础上更新step值。

(3)进阶版界面及功能

功能

采用文本框和调节框，当改变二者值时，会出现reset按钮。

(4)进阶版代码及思路

import "./styles.css";
import { useState } from "react";

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

function Counter() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  function handleReset() {       //reset按钮执行效果
    setCount(0);
    setStep(1);
  }

  const date = new Date();
  date.setDate(date.getDate() + count);

  return (
    <div>
      <div>
        <input                            //设置step调节框
          type="range"
          min="0"
          max="10"
          value={step}
          onChange={(e) => setStep(Number(e.target.value))}
        />
        Step:{step}
      </div>

      <div>
        <button onClick={() => setCount((c) => c - step)}>-</button>
        <input                  //设置count文本框
          type="text"
          value={count}
          onChange={(e) => setCount(Number(e.target.value))}
        />
        <button onClick={() => setCount((c) => c + step)}>+</button>
      </div>

      <p>
        <span>
          {count === 0
            ? "Today is "
            : count > 0
            ? `${count} days from today is `
            : `${Math.abs(count)} days ago was `}
        </span>
        <span>{date.toDateString()}</span>
      </p>
      {count !== 0 || step !== 1 ? (     //满足此条件reset按钮才会出现
        <div>
          <button onClick={handleReset}>Reset</button>
        </div>
      ) : null}
    </div>
  );
}

(1)onChange用法

解析：onChange={(e) => setStep(e.target.value)}

1.onChange

onChange 是一个事件处理程序，专门用来监听用户对表单元素（如输入框、文本域、复选框、下拉菜单等）的更改。它会在以下情况下触发：

• 用户在输入框中输入或删除字符。
• 用户从下拉菜单中选择不同的选项。
• 用户勾选或取消复选框。

2. (e) => setStep(e.target.value)

这是一个箭头函数，作为 onChange 事件处理程序传递。

3.e（事件对象）

e 是事件对象，代表触发 onChange 事件的详细信息。它包含事件发生时的各种信息，比如事件目标（target）以及事件类型。

4.e.target

e.target 表示触发事件的 DOM 元素。在表单控件中，这通常是一个 <input>、<select> 或 <textarea> 元素。

5.e.target.value

e.target.value 是表单控件当前的值。例如：

• 对于文本输入框，value 是用户输入的文本。
• 对于下拉菜单，value 是选中的选项值。

setStep

在这里，setStep 被用来更新 step 变量的值，使其与用户输入保持同步。

执行步骤：

1、用户在输入框中输入内容。

2、onChange 事件被触发，e.target.value 捕获用户输入的值。

3、setStep 函数被调用，更新 step 状态。

4、组件重新渲染，输入框的值和页面上的 Current Step 文本同步更新。