react实现双向绑定（复杂数组）

weixin_44997506

于 2023-04-25 10:24:28 发布

阅读量310

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44997506/article/details/130338881

版权

该文章展示了一个React组件，它维护了一个产品列表，每个产品包含姓名和型号。组件实现了两个处理函数，分别用于在输入事件时更新产品的姓名和型号。状态管理是通过React的setState方法进行的，并使用了ES6的语法特性，如扩展运算符和箭头函数。

摘要由CSDN通过智能技术生成


import React from 'react';

class Products extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [
        { name: 'aaa', type: 'a01' },
        { name: 'bbb', type: 'b01' },
        { name: 'ccc', type: 'c01' }
      ]
    };
  }

  handleInputChangeName = (event, index) => {
    const { value } = event.target;
    this.setState(prevState => {
      const products = [...prevState.products];
      products[index].name = value;
      return { products };
    });
    console.log(this.state)
  };
  handleInputChangetype = (event, index) => {
    const { value } = event.target;
    this.setState(prevState => {
      const products = [...prevState.products];
      products[index].type = value;
      return { products };
    });
  };

  render() {
    const { products } = this.state;
    return (
      <div>
        {products.map((product, index) => (
          <div key={index}>
            姓名
            <input
            name='姓名'
              type="text"
              value={product.name}
              onChange={event => this.handleInputChangeName(event, index)}
            />
            型号：
            <input
              type="text"
              value={product.type}
              onChange={event => this.handleInputChangetype(event, index)}
            />
            
          </div>
        ))}
      </div>
    );
  }
}

export default Products;