高端互联网网站招工 最新招聘信息

• 背景
  初涉 【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拼接，便于唯一的索引区分，可自行设定

• 继续学习，加油！加油！