React - Hook 动态添加多行记录，针对输入框操作的一种实现方式

• 背景 初涉 【React - Hooks】 前端知识 发现动态生成多条记录时，输入框数据变化的绑定事件是个常见的知识点 在此记录一番，希望能帮到踩坑的小伙伴 以变化 SKU 商品售价 为例，需求截图如下：

• 实现步骤：

①. 在定义组件时，就可以初始化赋值一个，SKU 售价数组 —— "skuSellingPrice"

代码语言：javascript复制

// 组件初始化赋值
···
const [skuSellingPrice,setSkuSellingPrice] = React.useState([]);
···

②. 设计输入框 "<input />" 元素组成，尤其注意绑定 onChange () 事件,以及 value 值的处理

代码语言：javascript复制

<td>
  <input type="number" name={"sku_arr[" index "][selling_price]"}
          onChange = {handleChangeSkuValue} data-index={index}
          data-sku_type="skuSellingPrice"
          value={skuSellingPrice[index]==undefined?'0.00':skuSellingPrice[index]} 
          className="layui-input input-selling_price"/>
</td>

③. 定义 "handleChangeSkuValue()" 监听事件绑定

代码语言：javascript复制

// 商品售价 "onChange" 监听事件绑定
function handleChangeSkuValue(e){
	 let index = e.target.getAttribute("data-index");
	 let sku_type = e.target.getAttribute("data-sku_type");
	 let val = e.target.value;
	 let opArr = [];
	 switch (sku_type){
	     case 'skuSellingPrice':
	         opArr = [...skuSellingPrice];
	         opArr[index] = (val=='')?0:val;
	         setSkuSellingPrice(opArr);
	         break;
	     default:
	         break;
	 }
}

• 【注意】
  1. 注意鄙人对 value 值的处理操作，建议实测优化 value={skuSellingPrice[index]==undefined?'0.00':skuSellingPrice[index]}
  2. 代码中，我对 data-index 的赋值 其实就是 SKU 的规格ID拼接，便于唯一的索引区分，可自行设定
• 继续学习，加油！加油！

data handle input undefined 事件

0 人点赞