React_练习Demo__记账表

Demo演示

Demo主要涉及知识点

useState

React的hook之一，用来设置动态值；通过 useState的 函数调用，从而 重新执行 当前组件，以此更新值
使用方式：

1. 从react库引入useState模块

   import { useState } from "react";
   

2. 在组件中定义需要追踪的属性；该方法接收一个初始值，返回一个数组，第一个值表示 更新值，第二个为 操作值更新的方法

   //某组件中
   const [isEditing, setIsEditing] = useState(false);
   

3. 在需要使用的地方 使用 此动态值 / 或 操作更新值
   体量小应用，使用state更新组件的方式可行，复杂的状态控制情况下，不一定适用state值（因为这个值并非保证实时，只有在操作函数更新时React会保证实时性）

     {!isEditing ? (
       <button onClick={showDisplayHandler}>添加新账单</button>
     ) : (
       <ExpenseForm
         onGetExpenseDate={getExpenseDate}
         onSetEditing={hideDisplayHandler}
       />
     )}
   

props属性值传递

自定义的组件 有从属关系，可以通过父级的属性值向下传递给组件所需要的值，以及反向操作父级方法。
如下是典型 父组件向下传递方法，子组件通过触发自身的函数 从而调用父级别的函数更新某些全局状态值

//父组件
const getExpenseDate = (data) => {
  setExpenses((prevalue) => [data, ...prevalue]);
};
//..
<InfoGather onGetExpenseDate={getExpenseDate} />
//..

//子组件
const InfoGather = ({ onGetExpenseDate }) => {
   //..
  const getExpenseDate = (data) => {
    const expenseDate = {
      ...data,
      id: Math.random().toString(),
    };
    onGetExpenseDate(expenseDate);
  };
  return (
    //..
  );
};

input 双向数据绑定 value动态值+onChange

通过设置 useState，input的 value属性 绑定此 动态值，onChange 触发实时输入 操作此state的更新方法
注意，对于只需要最终值的情况下，采用input的 实时触发搭配状态更新 并非好方案，可考虑采用 useEffect 进行优化

const [_inputs, setInputs] = useState({
  title: "",
  amount: "",
  date: "",
});
const inputsChangeHandler = (_type, val) => {
  if (_type === "title") {
    setInputs((prevalue) => {
      return { ...prevalue, title: val.target.value };
    });
  }
  //..
};
//..
<label>事件</label>
<input
  type="text"
  value={_inputs.title}
  onChange={(_e) => inputsChangeHandler("title", _e)}
/>
//..

Demo源码

github.com/nickyyoung2…