小编use*_*690的帖子

使用 React、react-final-form 和 lodash debounce 函数，我想验证用户名是否尚未使用（该字段使用的是 react-final-form）。

我在获取 debounce 函数以从提取请求返回已解决的承诺时遇到问题。

我提供了以下代码和框链接来演示我的问题：

请谁能告诉我为什么我的代码不起作用。

验证的入口点来自在验证属性中引用的 this.isNameUnique 调用

import React from "react";
import { Field, Form } from "react-final-form";
import { debounce } from "lodash";

class DemoForm extends React.Component {
  getIsNameUnique = name => {
    console.log("getIsNameUnique", name);

    // fake fetch request
    return async name => {
      const asyncResponse = await new Promise(resolve =>
        setTimeout(resolve({ name: true }), 1000)
      );
      console.log("async api response", asyncResponse);
      return asyncResponse;
    };
  };

  debounceCreativeName = name => …

我目前正在学习 React-Testing-Library。

我想测试鼠标与元素的交互。目前我有点不清楚 userEvent.click(element) 和 fireEvent.click(element) 之间的区别。两者都推荐使用，并且在下面的示例中它们是否被正确实施？

const mockFunction = jest.fn(() => console.info('button clicked'));
const { getByTestId } = render(<MyAwesomeButton onClick={mockFunction} />);
const myAwesomeButton = getByTestId('my-awesome-button');

// Solution A
fireEvent(myAwesomeButton)
expect(mockFunction.toHaveBeenCalledTimes(1);

// Solution B
userEvent.click(myAwesomeButton);
expect(mockFunction).toHaveBeenCalledTimes(1);

在此先感谢您的澄清。

我想使用React-Select（版本2）来定制设计（选择）选项。

该文档建议更换组件将是我可以用来实现这一目标的一种方法。

不幸的是，我找不到显示该功能实现的示例。

有没有人可以向我介绍此功能的用法，从而使您拥有一个简单的自定义选项（也许标签和值在每个选项标签的左侧还包括SVG图形）。

提前谢谢了

我需要编写一些正则表达式，该正则表达式需要一个数字并删除小数点后的所有尾随零。语言是Actionscript3。所以我想写：

var result:String = theStringOfTheNumber.replace( [ the regex ], "" );

因此，例如：

3.04000 将会 3.04

0.456000会0.456等

我花了一些时间浏览各种正则表达式网站，发现这比我最初想象的要难解决。

我的问题是我无法取消触发touchstart后触发的mousedown事件.此问题特定于Android的本机浏览器.

Chrome和Safari都在Android和iOS(onMenuInteraction)中成功执行下面的方法.我的问题似乎仅限于Android的原生浏览器(对我而言,预装了Android 4.1.2).

以下是我从Javascript对象中提取的代码.

MenuButtonView.prototype.onSmallScreenSetUp = function() {
    $("#mobileMenuBtn").on( { "touchstart mousedown": $.proxy( this.onMenuInteraction, this ) } );
}

MenuButtonView.prototype.onMenuInteraction = function(e) {
    console.log( this, "onMenuInteraction", e );
    e.stopImmediatePropagation();
    e.stopPropagation();
    e.preventDefault();
}

请有人告诉我如何取消手指触摸触发touchstart事件的屏幕后触发的mousedown事件.

此要求基于管理与桌面和移动/平板电脑平台的交互.在您使用Android本机浏览器进行测试之前,一切正常.

非常感谢

d

我正在研究使用ESLint(Airbnb配置)和React/Redux.

下面的代码是一个标准型的阵营,我已经写了享受处理所有Airbnb的掉毛学科/终极版类.

通过了解Airbnb的配置偏好我已经解决了大部分的掉毛错误,但是,我目前还有几个方面不了解.这些是:

1. 整个方法renderTableHeader()以红色标出,ESLint告诉我:

[eslint]期望'this'由类方法'renderTableHeader'使用.(class-methods-use-this)(JSX属性)className:string

没有其他方法有这个linting问题

2. 我将一个从Redux状态的对象连接到props(包含我需要在这个类中迭代的许多键/对象).ESLint似乎不喜欢我将对象从状态连接到道具......给我的消息:

[eslint] object禁止Prop类型(react/forbid-prop-types)导入PropTypes

我的状态对象是一个包含许多引用用户对象的键的对象 - 所以我需要users成为一个对象.这是不好的做法吗？如果没有出现这个lint消息,我将如何连接一个要映射的对象？

在此先感谢...这是我的课程:

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { getUsers } from '../actions/getUsers';
import setUserMarketingPref from '../actions/setUserMarketingPref';
import { setFilter } from '../actions/setFilter';
import TableRow from '../components/TableRow';
import '../styles/styles.css';

class AppContainer extends Component {
  componentDidMount() {
    this.props.getUsers();
  }

  renderTableHeader() {
    return (
      <div className="table__header"> …

我对Canvas比较新.找到我的脚我正在创建一个简单的街机游戏.

我的问题是关于CPU性能/效率.

我在黑色背景上创建了100个随机定位的白点作为星星.在每个requestAnimationFrame上,星星向左移动一个像素,当它们到达最左侧时,该列像素位于屏幕的最右侧.

使用requestAnimationFrame我正在调用以下函数:

bgAnimateId = requestAnimationFrame( scrollBg );

function scrollBg() {
    var imgData = ctx.getImageData( 0, 0, 1, canvas.height );
    var areaToMoveLeft = ctx.getImageData( 1, 0, canvas.width-1, canvas.height );
    ctx.putImageData( areaToMoveLeft, 0, 0 );
    ctx.putImageData( imgData, canvas.width-1, 0 );
    bgAnimateId = requestAnimationFrame( scrollBg );
}

我担心的是 - 创建100个小画布元素(或100个div)并为其设置动画会更好吗,或者更好地利用我上面使用过的像素方法.

非常感谢您的帮助/指导:-)

当键引用是动态的时，是否有 ES6（及更高版本）解决方案使用解构和扩展运算符创建一个新对象，其中键和值从原始对象中删除，因此：

const state = {
   12344: {
      url: 'http://some-url.com',
      id: '12344'
   },
   12345: {
      url: 'http://some-other-url.com',
      id: '12345'
   }
}

const idToDelete = 12344

const { [idToDelete], ...newState } = state // dynamic key

console.log('newState:', newState)

// desired newState would only have the key 12345 and its value

除非这是我目前的 Babel 设置，否则我无法弄清楚 ES6 的清洁方式（如果存在的话）。

提前谢谢了

使用lodash I\xe2\x80\x99d 希望能够通过几个键对如下所示的对象数组（但更大）进行排序，其中一些键嵌套在数组中：优先级是：

\n
1. 给定年份的收入（即提供（例如）2012 年，\n收入将用于该年的所有要素）
\n
2. displayInGraph（为真）
\n
3. pinnedRow（为真）
\n

I\xe2\x80\x99d 也希望能够反转上述内容。

我查看了lodash 文档，但看不到我的问题的解决方案：

[{\r\n    displayInGraph: true,\r\n    pinnedRow: true,\r\n    dateRange: [{\r\n      year: 2010,\r\n      income: 20000\r\n    }, {\r\n      year: 2011,\r\n      income: 30000\r\n    }, {\r\n      year: 2012,\r\n      income: 40000\r\n    }, {\r\n      year: 2013,\r\n      income: 44000\r\n    }]\r\n  },\r\n  {\r\n    displayInGraph: true,\r\n    pinnedRow: false,\r\n    dateRange: [{\r\n      year: 2010,\r\n      income: 20000\r\n    }, {\r\n      year: 2011,\r\n      income: 32500\r\n    }, {\r\n      year: 2012,\r\n      income: 50000\r\n    }, {\r\n …

我正在创建一个在触摸事件发生时显示的HTML导航菜单.

在打开/关闭菜单和菜单列表的按钮之间是一个我无法摆脱的差距,甚至可以解决为什么它在那里!

奇怪的是(对我来说)如果我在菜单列表的包含块中添加1px边框,<div id="navContent"/>则间隙消失.

我在下面的URL http://jsfiddle.net/ufvmj4n9/中将CSS和HTML问题的演示放入jsfiddle

#container {
    position:relative;
    top: 0px;
    width:100%;
    height:100%;
}
#mobileMenuBtn {
    display: block;
    position: relative;
    opacity: 0;
    width:290px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    background-color:#00F;
    height:23px;
}
#navContainer {
    display:block;
    position: absolute;
    top:95px;
    width:100%;
    height:auto;
}
#navContent {
    /*border:1px solid green;*/
    position:relative;
    top:0px;
    height:350px;
    width:290px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(51,102,204,0.8);
}
#navList {
    position:relative;
    top:30px;
    list-style-type: none;
    width:100%;
    margin-left: 30px;
    text-align: left;
    padding:0;
}
.navText {
    position: inherit;
    display: list-item;
    left:0px; …