@1productaweek/react-stately 中文文档教程

Question

React Stately

这个包允许你轻松地管理表单或其他任何东西的状态——使用钩子！

Stately

在 Stately 中包装您的表单（或任何其他组件）。 任何子组件现在都可以使用 Stately hooks - 见下文。

import { Stately } from '@1productaweek/react-stately'

<Stately initialValue={{ abc: 1 }}>
  <form onSubmit={onSubmitHandler}>
    <StatelyInput field='name.of.prop' />
  </form>
</Stately>

您还可以将一个函数作为子函数传递，以访问状态控制器。

import { Stately } from '@1productaweek/react-stately'

<Stately initialValue={{ abc: 1 }}>
  {(stately: StatelyController, value: any) => (
    <StatelyInput field='name.of.prop' />
  )}
</Stately>

Create your own Stately inputs

您可以使用 useStatelyField 挂钩轻松创建您自己的输入。

import React from 'react'
import { useStatelyField } from '@1productaweek/react-stately'

function StatelyInput ({ field, onChange, initialValue, forwardedRef, ...props }: any) => {
  const [value, setValue] = useStatelyField(field, { initialValue })
  return (
    <input
      {...props}
      forwardedRef={forwardedRef}
      value={!value ? '' : value}
      onChange={(e: any) => {
        setValue(e.target.value)
        if (onChange) onChange(e)
      }}
    />
  )
}

Hooks

useStately()

获取庄严的控制器。 Stately 控制器具有方法：getValue(field)、setValue(field, value) 和 watch(field, fn)

import { useStately } from '@1productaweek/react-stately'

const stately = useStately()

useStatelyField(field, options)

允许您获取/设置庄严树中的特定字段值。 如果设置了 trackChildren，则 path.to.prop 的任何更改及其子值的任何更改都会更新值（例如 path.to.prop.child） .

import { useStatelyField } from '@1productaweek/react-stately'

const [value, setValue] = useStatelyField('path.to.prop', { initialValue: 'init', trackChildren: true })

useStatelyArray(field, initialValue)

允许您创建和管理数组值。 数组的工作方式不同，因为排序很重要。 initialValue 默认为 []。

useStatelyArray 返回具有以下属性的对象：

• fields - an array of objects - key, field, remove() and initialValue
• add() - add a blank value to the array
• addWithInitialValue -
• remove() - remove an item at the specified index
• move(fromIndex, toIndex) - move array item from one position ot another

import { useStatelyArray } from '@1productaweek/react-stately'

const {
  fields, add, addWithInitialValue, remove, move
} = useStatelyArray('path.to.prop', ['abc'])

const els = fields.map(({ key, field, remove }, i) => (
  <>
    <StatelyInput field={field} key={key} />
    <button onClick={remove}>Delete</button>
  </>
))

Made by 1PAW

https ://1productaweek.com

• |- Ralley - queue as a service
• |- Snapboard - hackable dashboard