增加数据需求描述 ：点击增加按钮给下方列表增加一条数据

代码实现 ：

import React, { Component } from 'react';
class Jiejie extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '', // input中的值
            list: ['lisi', 'xiaohong'] // 初始列表
    inputChange(e) {
        this.setState({
            inputValue: e.target.value
    //增加姓名的按钮响应方法
    addList = () => {
        // es6扩展运算符
        // console.log(...[1, 2, 3]);  //123
        // console.log(...[1, 2, 3],4);  //1234
        // console.log([...[1, 2, 3],4]);  //[1,2,3,4]
        this.setState({
            inputValue: '',
            list: [...this.state.list, this.state.inputValue] //把list数组进行了分解，形成了新的数组，然后再进行组合
    render() {
        return (
                    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                    <button onClick={this.addList.bind(this)}> 增加姓名 </button>
                </div>
                        this.state.list.map((item, index) => {
                            return <li key={index}>{item}</li>
            </div>
export default Jiejie;
删除数据需求描述：点击列表删除当前一条数据
 
 代码实现：
 
import React, { Component } from 'react';
class Jiejie extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '', // input中的值
            list: ['lisi', 'xiaohong']
    inputChange(e) {
        this.setState({
            inputValue: e.target.value
    //增加姓名的按钮响应方法
    addList = () => {
        // es6扩展运算符
        // console.log(...[1, 2, 3]);  //123
        // console.log(...[1, 2, 3],4);  //1234
        // console.log([...[1, 2, 3],4]);  //[1,2,3,4]
        this.setState({
            inputValue: '',
            list: [...this.state.list, this.state.inputValue] //把list数组进行了分解，形成了新的数组，然后再进行组合
    // 删除姓名，使用下标的方法
    deleteItem = (index) => {
        let list = this.state.list;
        list.splice(index, 1);
        this.setState({
            list: list
    render() {
        return (
                    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                    <button onClick={this.addList.bind(this)}> 增加姓名 </button>
                </div>
                        this.state.list.map((item, index) => {
                            return <li key={index} onClick={this.deleteItem.bind(this, index)}>{item}</li>
            </div>
export default Jiejie;
                    React实现列表的动态增加与删除增加数据需求描述：点击增加按钮给下方列表增加一条数据代码实现：import React, { Component } from 'react';class Jiejie extends Component {    constructor(props) {        super(props);        this.state = {            inputValue: '', // input中的值            list: 
				
点击删除按钮，删除列表中对应项本来是React比较基础的应用，可是应用情况变得复杂了以后，我还真想了一会儿才搞定。
简化一下应用场景：点击新增按钮，增加一条输入框，点击输入框旁边的按钮，删除该输入框（不能删错了啊）。
先说第一种方法
问题刚上手，首先规划级别：一个输入框和对应删除按钮为一个子组件，整体为父组件即可方便处理。
注意的点：生成的一坨输入框是一个数组，为了准确删掉对应项，生成时要编号。点击删除按钮要反馈对应编号，然后进行删除。
现在的逻辑是：整个待展示列表（由子组件组成的数组）是个state，添加按钮会增加一个元素到这个state里面，添加的方法如下：
add(){
  var l
				
react 实现元素的增删功能
在初次开发过程中遇到这样一个问题，动态添加input输入框，刚开始直接用push方法添加，然后再用setState更新，结果无效，后来查了资料，是这样说的：
不要直接改变state 直接对组件state中的属性赋值将不会触发DOM更新，因为React并不知道state被改变了
state的更新可能是异步的 React会一次处理多个对setState的调用以提高性能，...
功能： 需要对多个Input组成的list可以新增和删除
在之前的文章 react 涉及的增加，删除list ，我说不可以使用 index 来做删除，就使用了 给每个 list 添加 selfId 的方式来实现删除。
然而事实是可以使用 index 来进行删除操作的。当年我才疏学浅，没有get到高级玩法，使用selfId这样的实现，无疑就是对数据过度操作了，所以学习了新的使用方法，实现如下：
				
让列表数据化
现在的列表还是写死的两个标签，那要变成动态显示的，就需要把这个列表先进行数据化，然后再用javascript代码，循环在页面上。
我们先给上节课的list数组增加两个数组元素，代码如下：
    constructor(props){ //// 构造函数
        // 调用父类方法，继承
        super(props) 
        this.state = {
            inputValue:"", //value的数据
            list:
基础Demo
import { Form, Input, Button, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
const Demo = () => {
  const onFinish .
				
React 实现列表拖动效果
当我们想在 React 中实现一个列表拖动的效果的时候，有很多的第三方库（React dnd）可以借鉴，但是学习第三方库也是一个成本，或者拖动本身并不复杂，只需要第三方库的某一个 api 。这样情况下，我们可以自己实现一个。
完成项目 欢迎 star
效果预览用户名：admin；密码：admin；
1. 使用 React 的鼠标事件
React 鼠标事件
此次开发需要用到动态生成多行表单，因为新老数据要兼顾，老数据是对象存储走的一个接口，新数据走的多行配置，对象数组存储，走的另一个接口，所以在展示上就需要区分下。
注意这里默认了第一行不能删除，当然你也可以在变成多行的时候，给每一行都加上删除，但是为了避免数据被删成一行都不剩了，你需要处理下，要么在删成一行的时候禁止删除或者隐掉删除按钮，要么就在删除后要调接口的时候判断处理下，具体的得看需求来开发。
因为这块的按钮有设置，如果配置的参数含有passwo
				
唠叨几句啦
在看程墨老师的深入浅出高阶组件，开头一点提了一个需要，创建两个高阶组件，一个能给传入的元素自定义添加props，一个是删除特定的props。我刚刚做了一下，发现高阶组件需要区分好传入的是class还是react element, 同时也需要注意好return回去的是啥。顺便提一下高阶组件的概念，就说一个函数，能够接受一个组件作为参数，然后返回的时候，这个组件就带有这个高阶组件给的某些特性。我理解就跟掉泥坑了，得带点土出来一个道理。
对比一下两个组件，贴代码时刻来啦
删除属性的高阶组件
我们需要传入任何组件和参数，都把user参数给删除了，所以返回值是一个接收props属性的函
				
    这几天基于react写了一个小demo测试，主要实现的功能是：在输入框中输入文字，点击添加按钮，在下方的表格中会自动添加一行数据，点击删除按钮后，该行数据被删除。
    先来看看最后的效果图：
    可能样式没怎么调，看着有点别扭，表格样式扒的是菜鸟教程上的，觉得还行的也可以用这个样式哦，或者改成自己喜欢的即可，最重要的是功能实现就好...
				
antd 动态增减多个表单项封装一些废话获取地址（成品+源码）使用方法api 与 变量名解释DynamicFormItem：MyInput：最后
之前有个需求是要两个动态增加的表单项，且每个表单项由3个组件构成。当时考虑抽出单独的组件实现，但因为上线时间关系，上线之后才完整的抽成组件，在这里分享下。
获取地址（成品+源码）
npm 获取方式（非源码）：
//想直接使用或者看效果的，可以...
				
> 注：可能在做动态 form 表单时直接写一个 form 表单、使用 Form.list 自己不需要写任何变更原来数据结构的逻辑
> 若是以上情况可以不需要给表单设置值来变更 form 结构、直接在输入完表单之后、取 form 值提交
> 但很多情况下，业务都会很复杂、比如选择一项值之后需要给其他表单字段设置对应的值、或后台需要类似城市联动组件中，非value值，此处完全依赖 form 表单自身是很难实现的。
> 以下只存在于复杂逻辑与数据结构时、需要自己存储一份数据对应到 form 中
import React, { Component } from 'react';
import { Popover, Button, Checkbox, Row, Col, Card } from 'antd';
import styles from './style.less';
class ToCustomCol
				
import React, { PureComponent } from 'react';
import { Form, Table, InputNumber } from 'antd';
export default class DTable extends PureComponent {
  changeInput = (record, value) => {
    const {...
    const brandName = prompt('请输入品牌名称');
    if (brandName) {
      const newBrand = { id: Date.now(), name: brandName };
      setBrands([...brands, newBrand]);
  const handleDeleteBrand = (id) => {
    const updatedBrands = brands.filter(brand => brand.id !== id);
    setBrands(updatedBrands);
  return (
      <h2>品牌列表</h2>
      <button onClick={handleAddBrand}>添加品牌</button>
        {brands.map(brand => (
          <li key={brand.id}>
            {brand.name}
            <button onClick={() => handleDeleteBrand(brand.id)}>删除</button>
export default BrandList;
在这个示例中，我们使用了React的函数组件和`useState`钩子来管理品牌列表的状态。在`brands`数组中存储品牌对象，每个对象有一个唯一的`id`和品牌名称`name`。
组件渲染时，会展示一个标题、一个添加品牌的按钮和一个品牌列表。点击添加品牌按钮时，会弹出一个对话框要求输入品牌名称，然后将新品牌添加到`brands`数组中。每个品牌都会显示在列表中，并且每个品牌后面有一个删除按钮，点击按钮会从列表中删除该品牌。
这只是一个简单的示例，你可以根据自己的需求进行扩展和修改。希望能对你有所帮助！