小编Mic*_*hal的帖子

以react-hook-form形式输入onChange

我正在使用 React 和React-hook-form库构建 Web 应用程序。我想创建表单,其中某些字段的更改会触发某些事件。所以我需要通过自定义onChange

但是,从 v7.0 开始我无法使用,onChange因为register使用它自己的onChange.

import React from 'react'
import { useForm } from 'react-hook-form'

const MyForm = () => {

  const form = useForm()
  const onChangeFirst = value => console.log('First:', value)
  const onChangeSecond = value => console.log('Second:', value)

  return (
    <form onSubmit={form.handleSubmit(vals => null)}>
      <input {...register('first')} />
      <input {...register('second')} />
    </form> 
  )

}

Run Code Online (Sandbox Code Playgroud)

如何传递onChangeFirstfirst输入和onChangeSecond输入second

javascript forms reactjs react-hook-form

15
推荐指数
1
解决办法
3万
查看次数

仅当 mongoDB 中外来字段不为空时才查找

我收集了文章和评论。评论可能有articleId(这是对文章的回答)或parentId(这是对另一条评论的回答)。只有2级,回答另一个评论不能有答案。

// articles
{ "_id": 100, "text": "Article text" } 

// comments
{ "_id": 1, "text": "First text", "articleId": 100 },
{ "_id": 2: "text": "Second text", "articleId": 100 },
{ "_id": 3, "text": "Third text", "parentId": 2 }  
Run Code Online (Sandbox Code Playgroud)

我想找到所有文章、文章评论和评论答案。

db.getCollection("articles").aggregate([
    { "$match": {} },

    // Lookup comments of article.
    { "$lookup": { "from": "comments", "localField": "_id", "foreignField": "parentId", as: "comments" } },
    { "$unwind": { "path": "$comments", "preserveNullAndEmptyArrays": true } …
Run Code Online (Sandbox Code Playgroud)

mongodb aggregation-framework

7
推荐指数
1
解决办法
5937
查看次数

CSS溢出滚动并同时可见

我有带有子 div 的可滚动 div 。有没有办法显示整个孩子(也在可滚动 div 之外)?现在,overflow-x: scroll就像overflow-x: hidden滚动条一样。我想要overflow-x: visible带有滚动条。这是小提琴

.container {
  margin: 0 auto;
  overflow-x: scroll;
  width: 300px;
}

.child {
  background-image: linear-gradient(to left, blue, green);
  height: 100px;
  width: 600px;
}

.containerExample {
  background-image: linear-gradient(to left, blue, green);
  margin: 0 auto;
  overflow-x: visible;
  width: 600px;
}

.childExample {
  border: 1px solid red;
  height: 100px;
  margin: 0 auto;
  width: 300px;
}
Run Code Online (Sandbox Code Playgroud)
Now:

<div class="container">
<div class="child">

</div>
</div>

What I want (red …
Run Code Online (Sandbox Code Playgroud)

html css overflow

7
推荐指数
1
解决办法
3699
查看次数

React 样式组件性能

我正在使用 React 和 Styled Components 开发一个网站。但是,网站在移动设备上运行速度非常慢,并且 Google Chrome 控制台中会出现警告:

[违规] 长时间运行的 JavaScript 任务耗时 305 毫秒

所以我找到了这个问题的现有主题,并使用 React Developer Tools 寻找降低我的应用程序速度的原因。我创建了包含许多渲染项目的新空页面:

import * as React from 'react'
import { render } from 'react-dom'

const items = new Array(5000).fill({ title: 'Title', description: 'This is description.' })

render(
    <>
        {items.map((item, i) => (
            <div>
                <h1>{item.title}</h1>
                <p>{item.description}</p>
            </div>
        ))}
    </>,
    document.getElementById('app')
)
Run Code Online (Sandbox Code Playgroud)

React Dev Tools 分析器显示:

在此处输入图片说明

不过,如果我更换作出反应的divh1p与样式化成分Styled.divStyled.h1Styled.p(没有任何样式):

import * as …
Run Code Online (Sandbox Code Playgroud)

javascript performance reactjs styled-components

7
推荐指数
1
解决办法
728
查看次数

从数组到对象的 TypeScript 类型

我有数组,其中每个项目都是 array [name: string, someFunction: Function]。我想将其转换为对象,其中键是names,值是someFunctions:

// Input
const arrayFunctions = [
    ['getLength', (text: string) => text.length],
    ['setValue', (id: string, value: number) => {}],
    ['getAll', () => ([1, 2, 3])]
]

// Output
const objectFunctions = {
    getLength: (text: string) => text.length,
    setValue: (id: string, value: number) => {},
    getAll: () => ([1, 2, 3])
}
Run Code Online (Sandbox Code Playgroud)

有什么方法可以连接输入数组中的函数类型和输出对象中的函数类型吗?

type ObjectFunctions<ArrayFunctions> = { [/* Value from ArrayFunctions[i][0] */]: /* Value from ArrayFunctions[i][1] */ }

const arrayToObject = …
Run Code Online (Sandbox Code Playgroud)

typescript

7
推荐指数
1
解决办法
5931
查看次数

在 Google 饼图中显示标签和百分比

我想在谷歌饼图中显示标签百分比。有什么办法吗?在文档中,我发现可以使用pieSliceText选项修改文本。可能的值为:

label- 显示数据名称(例如Apples

value- 显示绝对值(例如7

percentage- 显示百分比值(例如50%

value-and-percentage- 显示值和百分比(例如7 (50%)

但是有没有类似的东西label-and-percentage来展示这样的东西Apples (50%)

javascript charts google-visualization

5
推荐指数
1
解决办法
6817
查看次数

Python Peewee 中同一个表的外键

我在 Python 中使用 ORM peewee来实现 sqlite。我想创建一个表,其中的Item字段parent_id将作为外键Item

from peewee import *

db = SqliteDatabase("data.db")

class Item(Model):
    id = AutoField()
    parent_id = ForeignKeyField(Item, null = True)

    class Meta:
        database = db

db.create_tables([Item])
Run Code Online (Sandbox Code Playgroud)

但是,由于循环外键,出现错误:

NameError:在封闭范围内赋值之前引用了自由变量“Item”

DeferredForeignKey对于这种情况, peewee中有:

from peewee import *

db = SqliteDatabase("data.db")

class Item(Model):
    id = AutoField()
    parent_id = DeferredForeignKey("Item", null = True)

    class Meta:
        database = db

db.create_tables([Item])
Item._schema.create_foreign_key(Item.parent_id)
Run Code Online (Sandbox Code Playgroud)

不幸的是,sqlite中没有ADD CONSTRAINT,所以出现另一个错误:

peewee.OperationalError:靠近“CONSTRAINT”:语法错误

有没有办法使用 peewee 在 sqlite 中创建循环外键,或者我必须使用纯整数而不是外键或使用本机 SQL 而不是 ORM?

python database sqlite foreign-keys peewee

5
推荐指数
1
解决办法
1487
查看次数

基于第一项数组的值的数组第二项的打字稿值

我有数组对象,其中每个数组都是pair [value, function],其中function接受value参数:

const items = {
    first: ['a', val => val.length], // val should be string
    second: [[1, 2], val => val.push(3)] // val should be number[]
}
Run Code Online (Sandbox Code Playgroud)

有没有办法将函数参数(第二个数组项)的类型设置为与第一个数组项的类型相同?我创建了这个,但它不起作用(函数参数的类型始终未知):

type Items = {
    [key: string]: any extends [infer Value, any] ? [Value, (val: Value) => any] : never
}

const items: Items = {
    first: ['a', val => val.length], // val should be string, but is unknown
    second: [[1, 2], val => val.push(3)] // …
Run Code Online (Sandbox Code Playgroud)

typescript

5
推荐指数
1
解决办法
583
查看次数

在 matplotlib 中隐藏轴线和标签,除了最小/最大 y 标签

我在 Python matplotlib 中有绘图:

from matplotlib import pyplot as plt

data = [1, 5, 2, 1, 1, 4, 3, 1, 7, 8, 9, 6, 1]
plt.plot(data)
Run Code Online (Sandbox Code Playgroud)

除了最小和最大 y 轴标签外,有没有办法隐藏轴线和标签?我知道plt.axis("off"),但是我想在 y 轴上显示第一个和最后一个标签。

当前图位于下图左侧,所需图位于右侧。

在此处输入图片说明

python matplotlib

4
推荐指数
1
解决办法
292
查看次数

在discord.js中获取用户横幅

有没有办法使用discord.js 获取discord 上的用户横幅?用户横幅是新功能,所以我不确定到目前为止是否有任何方法。我在文档中没有找到任何内容。例如。服务器横幅可用于:

https://cdn.discordapp.com/banners/GUILD_ID/GUILD_BANNER.png

对于用户横幅来说类似的东西会很棒。

javascript discord discord.js

3
推荐指数
1
解决办法
2万
查看次数

在THREE.js中生成旋涡星系的粒子

我想THREE.Points在THEE.js中创建一个简单的螺旋星系。
我不知道如何产生螺旋臂。有什么(不太困难)的方法吗?

在这里,我创建了这个小提琴。有一个扁平的球体,但没有螺旋臂。

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight)
camera.position.z = 1500
scene.add(camera)
const renderer = new THREE.WebGLRenderer({ clearColor: 0x000000 })
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// Random function with normal dustribution.
const normalRandom = (mean, std) => {
    let n = 0
    
    for (let i = 1; i <= 12; i++) {
      n += Math.random()
    }

    return (n - 6) * std + mean
}

const geometry = new THREE.Geometry() …
Run Code Online (Sandbox Code Playgroud)

javascript random math spiral three.js

2
推荐指数
1
解决办法
214
查看次数

防止在样式组件中将道具从子级传递到父级

我正在使用带有 TypeScript 的样式组件库。当我创建B继承自 React component 的样式组件时遇到问题AA是 node_module (我无法更改 的行为A)。但A将所有道具传递给div.

如果B有任何道具A没有,警告消息会显示在控制台中,因为div没有属性isExpanded

警告:React 无法识别isExpandedDOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 DOM 中,请将其拼写为小写isexpanded。如果您不小心从父组件传递了它,请将其从 DOM 元素中删除。

interface AProps {

}

interface BProps {
    isExpanded: boolean
}

const A = (props: AProps) => (
    <div {...props} />
) // Component A pass all props to <div>

const B = Styled(A)<BProps>`

` // I need isExpaned …
Run Code Online (Sandbox Code Playgroud)

javascript inheritance typescript reactjs styled-components

1
推荐指数
1
解决办法
1902
查看次数

numpy数组计算比等效的Java代码慢

我正在尝试使用Python处理大型2D数组,但速度非常慢。例如:

start = time.time()
result = numpy.empty([5000, 5000])

for i in range(5000):
    for j in range(5000):
        result[i, j] = (i * j) % 10

end = time.time()
print(end - start) # 8.8 s
Run Code Online (Sandbox Code Playgroud)

Java中的相同程序要快得多:

long start = System.currentTimeMillis();
int[][] result = new int[5000][5000];

for (int i = 0; i < 5000; i++) {
    for (int j = 0; j < 5000; j++) {
        result[i][j] = (i * j) % 10;
    }
}

long end = System.currentTimeMillis();
System.out.println(end - start); // …
Run Code Online (Sandbox Code Playgroud)

python arrays performance numpy

0
推荐指数
2
解决办法
146
查看次数