React 循环遍历插入DOM 传参获取参数

最新推荐文章于 2022-11-02 07:52:56 发布
最新推荐文章于 2022-11-02 07:52:56 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： React get 技能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Acitylion/article/details/109087989
版权
这篇博客详细介绍了在React应用中如何使用组件化思想实现动态增删DOM对象，通过示例展示了如何监听订单号选择并更新对应信息，以及添加新的工作计划。内容包括Select组件的使用、工作类型的选择、工作内容输入和保存日报功能的实现，体现了React的状态管理和组件交互能力。
摘要由CSDN通过智能技术生成

点击新增插入DOM对象 

 state = {
        size: 'large',
        notWorkPlane: [
            {
                type: '',//工作类型
                customer_info_id: '',//订单id
                content: ''//工作内容
            }

        ]
    };

//订单号   监听下拉菜单更新对应信息
    bindorderList = (value,key) => {
        console.log(`${value}`)
        console.log(key)
        let arr = this.state.notWorkPlane;
        arr.map((item,index)=>{
            if (key == index){
                item.customer_info_id = value

            }
            return item
        })
        this.setState({notWorkPlane:arr})
    }

//点击新增插入
  addPlane = () => {
        console.log(111)
        let arr = this.state.notWorkPlane
        arr.push({
            type: '',//工作类型
            customer_info_id: '',//订单id
            content: ''//工作内容
        })
        this.setState({notWorkPlane: arr})
        console.log(this.state.notWorkPlane)

    }

 <div className='programme' style={{padding: '14px'}}>

//遍历循环插入DOM对象

                        {
                            this.state.notWorkPlane.map((item, index) => {

                                return (
                                    <div key={index} style={{marginTop: '14px'}}>
                                        <div style={{display: 'flex'}}>
                                            <div style={{width: '33.333%'}}>
                                                <div style={{paddingBottom: '8px'}}>订单号</div>
                                                <Select
                                                    showSearch
                                                    style={{width: '80%'}}
                                                    placeholder="订单号"
                                                    optionFilterProp="children"
                                                    onChange={(value)=>this.bindorderList(value,index)}
                                                    filterOption={(input, option) =>
                                                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                    }
                                                >
                                                    {orderList}
                                                </Select>
                                            </div>
                                            <div style={{width: '33.333%'}}>
                                                <div style={{paddingBottom: '8px'}}>工作类型</div>
                                                <Select
                                                    showSearch
                                                    style={{width: '80%'}}
                                                    placeholder="请选择工作类型"
                                                    optionFilterProp="children"
                                                    onChange={this.workType}
                                                    filterOption={(input, option) =>
                                                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                    }
                                                >
                                                    <Option value="1">客户跟进</Option>
                                                    <Option value="2">方案对接</Option>
                                                    <Option value="3">带看</Option>
                                                    <Option value="4">商务谈判</Option>
                                                    <Option value="5">签约</Option>
                                                </Select>
                                            </div>

                                        </div>
                                        <div style={{paddingBottom: '8px', marginTop: '15px'}}>工作内容</div>
                                        <div>
                                            <TextArea onChange={this.workContent} rows={4} placeholder='请输入工作内容'/>
                                        </div>
                                    </div>
                                )
                            })
                        }

                        <div style={{paddingTop: '12px', display: 'flex'}}>
                            <div style={{
                                width: '73px',
                                height: '23px',
                                textAlign: 'center',
                                border: '1px solid #1890FF',
                                backgroundColor: '#fff',
                                color: '#1890FF',
                                fontSize: '10px',
                                lineHeight: '23px',
                                marginRight: '32px',
                                borderRadius: '4px'
                            }}>
                                签约中
                            </div>


                        </div>
                        <div style={{paddingTop: '12px', display: 'flex'}}>
                            <div onClick={this.addPlane} style={{
                                width: '75px',
                                height: '25px',
                                textAlign: 'center',
                                backgroundColor: '#1890FF',
                                color: '#fff',
                                fontSize: '10px',
                                lineHeight: '25px',
                                marginRight: '32px',
                                borderRadius: '4px'
                            }}>
                                新增计划
                            </div>
                            <div onClick={this.bindSave} style={{
                                width: '75px',
                                height: '25px',
                                textAlign: 'center',
                                backgroundColor: '#6BC33F',
                                color: '#fff',
                                fontSize: '10px',
                                lineHeight: '25px',
                                marginRight: '32px',
                                borderRadius: '4px'
                            }}>
                                保存日报
                            </div>

                        </div>


                    </div>

 

Acitylion
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React for循环渲染组件
a_靖的博客
11-26 1万+
通常你需要在一个组件中渲染列表。或者循环遍历渲染相同的多个组件，下面看看怎么实现： 先来个有 If 判断的字组件循环渲染： render() { // 聊天列表组件 function MsgList(props){ const list = props.list; const listItems = list.map((item,id...
React——循环添加DOM
weixin_43848532的博客
04-08 2908
总代码： import React, {Component, Fragment} from 'react' class App extends Component { constructor(props){ super(props) this.state = { list: ['a', 'b', 'c'] } } render(){ re...
react遍历对象生成dom
apple_2021的博客
04-11 2168
项目场景： 目前有一个需求，是要接收后台返回的一个对象，并且遍历他的属性和值显示到页面上，因为该对象表示的是自定义参数，每一次都不一样，所以记录一下； 问题描述 之前最常用的map是方法是用来遍历数组的。 const arr = [a, b, c] render(){ return ( <div> { arr.map((item,index)=>{ return ( <div key={index}>{item}</div> )
react Select选择器循环
abb_fyy的博客
01-13 3207
在父组件创建state 创建一个循环的方法 找到需要该方法的控件 查看handleEntityFormModalVisible方法，将创建循环的方法导入 在render中将状态加入 在子组件中也加入状态 在return中就可以使用grade数组了 效果如下： ...
React 遍历对象
MW
03-19 475
废话不多说上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遍历对象</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/...
详解react如何在组件中获取路由参数
08-30
React Router库提供了在组件中获取路由参数的功能，使得我们可以根据不同的参数来渲染不同的组件内容。下面将详细介绍如何在React组件中获取路由参数。 首先，我们需要安装React Router库。React Router分为v4、v5...
React如何将组件渲染到指定DOM节点详解
08-29
React 如何将组件渲染到指定 DOM 节点详解 React 框架是一个基于组件的框架，它提供了一种简单的方式来构建用户界面。但是，在某些情况下，我们需要将组件渲染到指定的 DOM 节点中，而不是默认的根节点。这篇文章将...
react and react dom js.zip
07-04
React 和 React DOM 是JavaScript库，主要用于构建用户界面，特别是单页应用程序（SPA）。React由Facebook开发并维护，它采用组件化的方式构建应用，提供高效、可复用的代码。本压缩包包含的文件是React和React DOM...
react.js 获取真实的DOM节点实例(必看)
10-20
下面小编就为大家带来一篇react.js 获取真实的DOM节点实例(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React循环DOM时为什么需要添加key
beifeng11996的博客
11-02 166
所以在每次更新的时候，React需要基于这两颗不同的树之间的差别来判断如何有效的更新UI，如果一棵树参考另外一棵树进行完全比较更新，那么即使是最先进的算法，该算法的复杂程度为 O(n3)，其中 n 是树中元素的数量，如果在React中使用了该算法，那么展示1000个元素所需要执行的计算量将在十亿的量级范围，这个开销太过昂贵了，React的更新性能会变得非常低效；当节点为不同的元素，React会拆卸原有的树，并且建立起新的树：当一个元素从。的不变，这种低效的比较方式会带来一定的性能问题，
react循环嵌套生成dom元素
北枫林
09-26 855
{ number.map(function (flag) { return <div> { data.map(function (item) { return <div onClick={cardclick}> <p>名字：{item.name} </p> <p>年龄：{item.ag
React获取DOM方法
liangzelei的博客
08-31 3万+
以下提供三种方法： import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class Index extends Component { onClick(event){ console.log(event.target.value); // 第一种方式 var subm
React中获取Dom方法
x的博客
10-30 4592
1. js 常规dom操作方式，通过id获取dom 2.react原生函数findDOMNode获取dom 3.通过ref来定位一个组件，切记ref要全局唯一（类似id） import React, { Component } from 'react'; import ReactDOM from 'react-dom';   class Index extends Component {  ...
React循环的俩种方式
qq_42957741的博客
11-28 1504
此处用的map循环 循环1 import React from 'react'; class Cty extends React.Component{ constructor(props){ super(props) this.state ={ list:[ { name:'志钦'}, ...
reactjs 获取真实dom，并获取dom css 三种方法
dahuzi的专栏
04-15 1万+
方法1： let senderName = ReactDOM.findDOMNode(this.refs['sender-name']); let nleft = senderName.style.left; let ntop = senderName.style.top; let nwidth = senderName.style.width; let nheight = senderName
react中使用富文本编辑器wangeditor
卡卡罗特的博客
03-19 1403
在开发react开发过程中在做一些表单内容提交修改过程中：用到了上传和下载附件；富文本编辑等，话不多说上代码： index.js文件是一个list表格： /* * 项目需求列表 */ import React, { Component } from "react"; import Storage from "store2"; // import History from "@utils/...
React 循环数组的2种方式
热门推荐
sunling的专栏
03-01 3万+
我们上边的例子是循环数组的内容到JSX中，其实在数组中可以直接使用JSX语法，看下面的例子。123456let arr=[    &lt;h1 key="1"&gt;Hello world!&lt;/h1&gt;,    &lt;h2 key="2"&gt; React is awesome&lt;/h2&gt;];ReactDOM.render(&lt;div&gt;{arr}&
react-router-dom路由传参及获取方法
最新发布
05-30
React Router Dom 提供了多种传递参数的方式，以下是其中几种常用的方法： 1. Query Parameters 通过 URL 上的查询参数传递参数，例如：`/user?id=123&name=John`。在组件中可以通过 `props.location.search` 来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值