How do I only save changes to a custom component's value on save? [v3.0.0-beta.20]

notchr11 months ago

5

• 

  tsfoster12 months ago

  🤦‍♂️ Thank you, much appreciated!

• 

  notchr12 months ago

  Which will submit the doc through the normal means

  
  
  

  Any buttons without that type will be treated as Submit buttons IIRC

  
  
  @878205106531762176

  Can you add "type='button'" to your button

• 

  tsfoster12 months ago

  Thanks

  @1049775120559898725

  .

  
  
  

  src/fields/TestField/Testfield.tsx:

  
  

  'use client';
  import {useField} from '@payloadcms/ui/forms/useField'
  
  function TestField({path}) {
    const {value, setValue} = useField({path})
    const onClick = function () {
      setValue(value + '*');
    }
    return (
      <div>
        <button onClick={onClick}>Click me</button><p>{value}</p>
      </div>
    )
  }
  
  export default TestField

  
  
  

  src/fields/TestField/index.ts:

  
  

  import Component from './TestField'
  
  export const TestField = (name) => {
    return [{
      name,
      type: 'text',
      admin: {
        components: {
          Field: Component,
        },
      },
    }]
  }

  
  
  

  src/collections/Examples/index.ts:

  
  

  import type {CollectionConfig} from 'payload/types'
  import {TestField} from '@/fields/TestField'
  
  export const Examples: CollectionConfig = {
    slug: 'examples',
    admin: {
      useAsTitle: 'name',
    },
    fields: [
      {
        name: 'name',
        type: 'text',
        required: true,
      },
      ...TestField('columname')
    ],
  }

• 

  notchr12 months ago

  Ill check it out

  
  
  @878205106531762176

  Hey, can you post your component code please?

• 

  tsfoster12 months ago

  Hi,

  
  
  

  I'm trying to create my first custom component on the v3 beta. if I use

  useField()

  , changes are saved on every use of

  setValue

  . I'm guessing I need to use React's

  useState()

  instead, but I can't work out how to then save the changes when hitting the document's 'Save' button.