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

泥豆芽儿 MT

发布于 2021-09-06 10:00:22

1.2K0

发布于 2021-09-06 10:00:22

文章被收录于专栏：木头编程 - moTzxx木头编程 - moTzxx

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

实现步骤：

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

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

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

<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()" 监听事件绑定

// 商品售价 "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拼接，便于唯一的索引区分，可自行设定
继续学习，加油！加油！

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-12-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

data