evident-indigo•12mo ago

How can I just see the current fields value?

So this seems like a really dumb question, but using refine, its really difficult to use the value of a field. What I mean by that is I want to check if a checkbox is checked, if its checked, I want to show additional fields. Problem is, I cant find the actual value that updates as I'm toggling the checked box:

<Form.Item
  label="Is Limited Edition"
  valuePropName="checked"
  name={["is_limited_edition"]}
>
  <Checkbox>Is Limited Edition</Checkbox>
</Form.Item>

<Form.Item
  label="Is Limited Edition"
  valuePropName="checked"
  name={["is_limited_edition"]}
>
  <Checkbox>Is Limited Edition</Checkbox>
</Form.Item>

How can I get the value of is_limited_edition?

3 Replies

kapa.ai•12mo ago

Hi @derekdoes. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can use the useForm hook from Ant Design to manage form states and get the value of a specific field. However, the information extracts provided do not contain a direct example of how to use this hook with a checkbox. Here's a general example of how you might use the useForm hook to get the value of a checkbox:

import { Form, Checkbox } from 'antd';

const Demo = () => {
  const [form] = Form.useForm();

  const onCheckboxChange = () => {
    const isLimitedEdition = form.getFieldValue('is_limited_edition');
    console.log(isLimitedEdition); // This will log the current value of the checkbox
  };

  return (
    <Form form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item
        name="is_limited_edition"
        valuePropName="checked"
      >
        <Checkbox onChange={onCheckboxChange}>Is Limited Edition</Checkbox>
      </Form.Item>
    </Form>
  );
};

import { Form, Checkbox } from 'antd';

const Demo = () => {
  const [form] = Form.useForm();

  const onCheckboxChange = () => {
    const isLimitedEdition = form.getFieldValue('is_limited_edition');
    console.log(isLimitedEdition); // This will log the current value of the checkbox
  };

  return (
    <Form form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item
        name="is_limited_edition"
        valuePropName="checked"
      >
        <Checkbox onChange={onCheckboxChange}>Is Limited Edition</Checkbox>
      </Form.Item>
    </Form>
  );
};

In this example, form.getFieldValue('is_limited_edition') is used to get the current value of the checkbox. The onChange prop of the Checkbox component is used to trigger this function every time the checkbox is toggled. Please refer to the Ant Design's <Form> documentation (https://ant.design/components/form/) for more information on how to use the useForm hook and other form functionalities. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

<@463543209675718667> kapa.ai is still learning and improving, please let us know how it did by reacting below

quaint-moccasin•12mo ago

Hello @derekdoes was the bot's answer useful for you?