setFieldState

A helper function to update single field state, it will rerender the field.

Loading...

function FormDemo() { const SetName = () => { const form = useFormContext() return ( <button onClick={() => { form.setFieldState('userName', { value: 'Bill' }) }} > Set Name </button> ) } const SetDisabled = () => { const form = useFormContext() return ( <button onClick={() => { form.setFieldState('userName', { disabled: true }) }} > Set Disabled </button> ) } const form = useForm({ onSubmit(values) { console.log('values', values) }, components: { SetName, SetDisabled, }, children: [ { label: 'User Name', name: 'userName', component: 'Input', value: 'Curry', }, { component: 'Box', css: 'spaceX2 toCenterY', children: [ { component: 'SetName', }, { component: 'SetDisabled' }, ], }, ], }) return <Form form={form} /> }

function FormDemo() {
  const SetName = () => {
    const form = useFormContext()
    return (
      <button
        onClick={() => {
          form.setFieldState('userName', { value: 'Bill' })
        }}
      >
        Set Name
      </button>
    )
  }

  const SetDisabled = () => {
    const form = useFormContext()
    return (
      <button
        onClick={() => {
          form.setFieldState('userName', { disabled: true })
        }}
      >
        Set Disabled
      </button>
    )
  }

  const form = useForm({
    onSubmit(values) {
      console.log('values', values)
    },
    components: {
      SetName,
      SetDisabled,
    },

    children: [
      {
        label: 'User Name',
        name: 'userName',
        component: 'Input',
        value: 'Curry',
      },
      {
        component: 'Box',
        css: 'spaceX2 toCenterY',
        children: [
          {
            component: 'SetName',
          },
          { component: 'SetDisabled' },
        ],
      },
    ],
  })

  return <Form form={form} />
}

LIVE DEMO