Twincos

Twincos 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

好好学习,天天向上

个人动态

Twincos 回答了问题 · 9月3日

antd的TreeSelect如何设置子节点不能作为选择项

selectable失效的原因是因为你没有用受控的Tree组件。selectable要设置为selectable={false}并且onCheck要设置一个空的方法()=>{} 这样他才生效的

关注 3 回答 2

Twincos 提出了问题 · 8月24日

解决scss通过js动态改变样式

这次项目使用scss去写样式。知道scss能写函数,嵌套能功能。现在我想希望通过js结合scss函数去动态。不再是以前那种在js页面判断一个值,然后再觉得样式怎么展示了。
打个比方:
image.png
以前的写法是:
js页面:

const [type,setType] = useState(false)
changeType = ()=>{setType(true)}

render(){
    return(
        <div onClick={changeType} className={type?"one":"two"}></div>
    )
}

css页面:

one:{color:red}
two:{color:blue}

关注 2 回答 1

Twincos 提出了问题 · 7月13日

macBook 上传文件,beforeUpload这个钩子返回来的file里面没有type值

电脑型号:Apple MacBook (MK4M2CH/A)(外表是金色的那一款)
系统是:image.png
我的电脑上传文件时,beforeUpload这个钩子返回来的file里面没有type,导致用户选择文件时,无法根据type去进行识别可选的文件类型。
请问一下有没有遇到同样情况的童鞋……
image.png
`代码片段:

const supportType ="application/vnd.msexcel,application/vnd.openxmlformat-officedocument.spreadsheetml.sheet";```

  const uploadProps = {
    // 删除选择的excel文件
    onRemove: (file) => {
      setFileList([]);
    },
    // 上传excel文件
    beforeUpload: (file) => {
      console.log(file,'== file ===')
      const fileType = file.name.endsWith('.xlsx') || file.name.endsWith('.xls')
      if (!fileType) {
        message.error('只能上传excel文件!请重新选择')
        return false
      }
      const isUpload = ALLOW_EXCEL_SIZE ? verifyExcel(file) : true;
      if (isUpload) {
        customRequest(file, (url) => {
          if (url) {
            setFileList([file])
            setFileUrl(url)
          }
        });
      }
      return false;
    },
    fileList,
  };```
return (
      <Upload {...uploadProps} accept={supportType}  type="file">
        <Button>
          <Icon type="upload" /> 选择文件
        </Button>
      </Upload>
  );

image.png
image.png

关注 3 回答 3

Twincos 提出了问题 · 5月19日

braft-editor富文本编辑器,如何限制输入的字数?

需求先说一下:使用braft-editor富文本编辑器,限制用户可输入的字符为100个,当大于100个字符时不能往下继续输入
悲惨经历诉一波:
疑问一:onReachMaxLength={handleMaxLength}事件不生效,打印过这个事件是已经传递进来的
image.png

疑问二:后来用onChange写到父组件上,事件可以正常生效也可以取到当前输入的字符数量,输入的文本内容。但是输入的文本内容里面是含有标签的。那么我该如何实现控制住他输入的字符不能大于100个,大于时不能再往下输入了呢?
image.png

疑问三:续上面问题,我想到用readOnly的属性。但是当我输入的值大于100的时候,富文本里面的字符被清空了……这不是我想要的效果……我该用什么方法才能解决呢?
image.png

image.png
求各位路过的大神解答一下……### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本(请勿用截图)

你期待的结果是什么?实际看到的错误信息又是什么?

关注 2 回答 1

Twincos 提出了问题 · 4月20日

map方法里面使用delete,为什么会改变原数组

使用map是返回一个新的数组的,我写了以下代码,发现虽然达到了我要删除数组的对象里面的指定元素了。但这个直接改变了我原数组。这让我不解,希望小伙伴能解答一下我这个菜狗的疑惑……

var arr = [{id:1,name:'coco'},{id:2,name:'gogo'}]
var brr = arr.map(v=>{
    delete v.id
    return v
})
console.log(arr,brr)

得出结果:
image.png

后来改了一下写法,不会改变原数组了。但还是有点疑惑为什么上面的写法会把原数组改变了。

var arr = [{id:1,name:'coco'},{id:2,name:'gogo'}]
var brr = arr.map(v=>{
    var obj = {
      ...v
    }
    delete obj.id
    return obj
})
console.log(arr,brr)

image.png

上面的操作其实我的目的就是想快速去除数组的对象里面某个元素。自从发现delete不安全之后,我就用比较笨的方法去实现了↓。各位有没有其他更好的方案可以提供一下,以达到快速去除数组的对象里面某个元素呢?

var arr = [{id:1,name:'coco',age:20},{id:2,name:'gogo',age:18}]
var brr = arr.map(v=>{
    return {
      name:v.name,
      age:v.age
    }
})
console.log(arr,brr)

image.png

关注 4 回答 3

Twincos 发布了文章 · 4月17日

页面回滚到顶部的顺滑效果

小弟是菜狗一枚,记录一波页面回滚到顶部的顺滑效果。如果有更好的实现方法可以发起评论一起分享分享哦~

image.png
1.实现页面滑动到底部需回滚到顶部的效果

使用window.xxx方法对是页面的可视区域进行滚动,不会使抽屉组件一并滚动至顶部。此方式是通过递归调用的方式平滑滚动实现,其实也可以用behavior: "smooth"去实现平滑滚动

toTop() {
let gotoTop = function() {
let drawerPosition =
    document.documentElement.scrollTop || document.body.scrollTop;
    drawerPosition -= 10;
    if (drawerPosition > 0) {
        window.scrollTo(0, drawerPosition);
    } else {
        window.scrollTo(0, 0);
        clearInterval(timer);
        timer = null;
    }
};
var timer = setInterval(gotoTop, 1);
}

2.实现抽屉组件内容滑动到底部回滚到顶部时的效果
为了实现抽屉组件的滚动。那么要先取到抽屉组件内容里的元素哦~~
使用behavior: "smooth"属性滑动的过程得非常顺溜。

//js部分

toTop() {
    const drawerPositon = document.getElementById("drawer");
    drawerPositon.scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "nearest"
    });
  }
  
// html部分  

<Drawer
   title="Basic Drawer"
   placement="right"
   closable={false}
   onClose={this.onClose}
   visible={this.state.visible}
 >
   <div id="drawer">
     ....我是内容....
     。。。好多好多的内容 。。。
   </div>
</Drawer>
查看原文

赞 0 收藏 0 评论 0

Twincos 回答了问题 · 4月3日

使用antd固定列和嵌套子组件的表格,scroll和expandedRowRender不兼容,导致表格内容错位了

这里错位的原因是因为table里面又放了一个表单。expandedRowRender里面后来没放table,而是手动把数组进行遍历,然后写样式……就没有出现这个问题了……

代码列一列🌰↓
`

 <Table
    className="erp-global-table"
    bordered
    rowKey={(_, index) => index}
    columns={columns}
    pagination={false}
    expandedRowRender={record =>
        record.goods.map((item, index) => {
            return (
                <div className="act_detail_expanded_row" key={index}>
                  <div className="item" style={{ width: "135px" }}>
                    <div>商品编号: </div>
                    <div>{item.code}</div>
                  </div>
                  <div className="item" style={{ width: "80px" }}>
                    <div>奖金比例: </div>
                    <div>
                      {" "}
                      <Tag color="#2db7f5">{item.bonus || 0}%</Tag>
                    </div>
                  </div>
                  <div className="item" style={{ width: "90px" }}>
                    <div>商家名称: </div>
                    <div>{item.shop}</div>
                  </div>
                  <div className="item" style={{ width: "100px" }}>
                    <div>一级分类: </div>
                    <div>
                      <Tag color="volcano">{item.category}</Tag>
                    </div>
                  </div>
                  <div className="item">
                    <div>商品名称: </div>
                    <div>{item.name}</div>
                  </div>
                </div>
              );
            })
          }
          dataSource={boundedGoods}
        />

`

关注 3 回答 2

Twincos 提出了问题 · 3月10日

解决 使用antd的Descriptions报错warning

需求上要求一行展示2个内容,我使用了antd的Descriptions组件。image.png
Descriptions.Item进行遍历。
贴代码:
`

<Card style={{ marginBottom: '15px' }}  size='small'>
    <Descriptions title="订单基本信息">
      {
        baseOrderMsg.map(item => {
          const { title, desc, id } = item
          return (
            <Descriptions.Item key={id} label={title} span={2}>{desc}</Descriptions.Item>
          )
        })
      }
    </Descriptions>
  </Card>

`
设置span={2}页面可以实现一行展示2个内容但控制台有warning提示:

react_devtools_backend.js:6 Warning: [antd: Descriptions] Sum of column span in a line exceeds column of Descriptions.

image.png

应该如何修改才可以既不报提示错误,也可以实现一行展示2个内容呢?

关注 2 回答 1

Twincos 提出了问题 · 3月5日

解决js 如何编写对象中假设有a属性时就不能有b属性的判断

最近在写一个搜索的接口的入参判断。
参数params固定值有currentPage,pageSize。如果参数中有a条件,那么提示用户“a条件不能与其他条件一并进行搜索”。如果没有a条件,其余条件可以组合性进行搜索

当前我写了一个方法,但觉得并不是太好。希望大家能多多指导一下,提出有更好更稳定的判断方法……

贴码:
`

import { page } from '@/common/constants';

const myFunc = (params) =>{
  const { defaultCurrent=1,defaultPageSize=20 } = page
  const {currentPage,pageSize} = params

  const postData = {
    currentPage:currentPage || defaultCurrent,
    pageSize:pageSize || defaultPageSize,
    ...params
  }

  if(params && Object.getOwnPropertyNames(params).length>3 && params['a']){
  message.info('请根据商品标签单独查询')
  return
}
    console.log('搜索成功!')
}

`

关注 2 回答 1

Twincos 回答了问题 · 3月2日

解决如何将A项目的某一分支迁移到B项目上

参考自楼上的@米花儿团儿 提供的方法,再结合自己的项目需求走了一波,实现了自己想要的效果,贴一下自己的实现过程:

1.先把Y分支推送到A项目的远程中

2.打开B项目执行:git remote -v
看到的是仓库较为详细的信息,包括名字,url,每个仓库

3.添加远程仓库进来:git remote add A A-url 
这时A是自己命名的仓库名称,A-url 是仓库A的远程地址,HTTP地址或SSH地址都可以。 这时再查看远程仓库,发现已经有A了

4.执行git fetch A 拉取新远程库的分支信息到本地

5.执行 git checkout A/branchname 切换分支

6.执行成功后新建分支git checkout -b 分支名称

7.新拉的分支想合并master分支时会出现:由于不同仓库,所以无法直接拉取的报错。执行以下git merge master --allow-unrelated-histories 即可

由于自己git的使用火候不够,操作过程还出现了由于仓库的关联,导致推送的时候推送错A项目了。解决过程比较生硬:执行了git remote remove A ,把关联的A项目取消管理,然后重新推送分支到B项目

关注 3 回答 4

认证与成就

  • 获得 1 次点赞
  • 获得 21 枚徽章 获得 0 枚金徽章, 获得 3 枚银徽章, 获得 18 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-01-21
个人主页被 277 人浏览