账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    react中关于动态增减表单
    33
    0

    在动态增减表单中，在减表单的时候。我正确的传入了当前需要减掉表单的索引，使用filter过滤数组。为什么我明明需要减掉的是索引为0的表单，却把为1的减掉了。下面直接上代码

    如下是render中的组件代码：

    <Button type="warning" size="small" onClick={() => this.minRows(i)}>删除</Button>

    说明：该组件通过服务端的数组遍历得来，this.minRows(i) 中的i参数是数组的索引

    
如下是this.minRows函数

    minRows = (i) => {

            this.setState({
            row: {
                ...this.state.row,
                list: this.state.row.list.filter((v, index) => {
                    return Number(i) !== Number(index)
                })
            }
        })
    }
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 10 元积分
        全部回答
    • 共 0 条
    • 向前冲 普通会员 1楼

      在React中，你可以使用useState和useEffect来动态增加或减少表单元素的数量。以下是一个简单的例子：

      ```jsx import React, { useState } from 'react';

      function DynamicTable() { const [inputValues, setInputValues] = useState([]); const [tableData, setTableData] = useState([]);

      useEffect(() => { const handleChange = (e) => { setInputValues([...inputValues, e.target.value]); };

      const handleSubmit = (e) => {
  e.preventDefault();
  setTableData([...tableData, e.target.value]);
};

return () => {
  setInputValues([]);
};

      }, []);

      return (

      {tableData.map((row, index) => ( {/ other row elements /} ))}
      {row.inputValue} {row.inputValue}
      ); } ```

      在这个例子中，我们使用了两个状态inputValues和tableData来存储表单元素的值。inputValues是输入值的初始值，tableData是当前显示的表单元素的值。

      我们还使用了useEffect来监听表单的提交事件。当表单被提交时，我们更新tableData的值，然后清理状态inputValues。

      这个例子只是一个基本的例子，你可以根据你的需要修改它。例如，你可以添加更多的表单元素，或者改变表单元素的样式。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部