EasyUI Forum
March 29, 2024, 12:07:32 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Radio button in forms  (Read 11316 times)
chrwei
Full Member
***
Posts: 219


View Profile Email
« on: April 27, 2021, 10:01:28 AM »

Trying to figure out how to use a RadioButton on a form, and it seems to be having an internal battle.  Code below is my test case that shows the issue, I consider it incomplete, but other than adding hacks I'm not sure how to complete it.

To test, click "A option 1", then click "A option 2".  On the console you'll see:
Code:
optA 1 true
handleFormChange null 1
optA 2 true
handleFormChange null 2

The battle is that is radio change AND the form change are both firing, except the form change has a NULL field name, which is a problem.  The easy hack is to ignore null field names in the form change, but it just doesn't seem right.


Code:
import React, { useState } from 'react';
import './App.css';
import { Form, FormField, Label, RadioButton, } from 'rc-easyui';

function App() {
  const [model, setModel] = useState({});
  const opts = {
    optA: [
      { value: 1, text: "A option 1" },
      { value: 2, text: "A option 2" },
    ],
    optB: [
      { value: 1, text: "B option 1" },
      { value: 2, text: "B option 2" },
    ],
  }

  function handleOpt(name, value, checked) {
    console.log(name, value, checked)
    if (checked) {
      const newData = { ...{}, ...model };
      newData[name] = value;
      //setModel(newData);
    }
  }

  function handleFormChange(name, val) {
    console.log("handleFormChange", name, val)
  }

  return (
    <Form
      model={model}
      onChange={handleFormChange}
    >
      <FormField name="optA" value={model.optA}>
        <label>A Option:</label>
        {opts.optA.map(opt => {
          return (<div key={opt.value}>
            <RadioButton
              inputId={"optA" + opt.value}
              value={opt.value}
              groupValue={model.optA}
              onChange={(checked) => handleOpt("optA", opt.value, checked)}
            />
            <Label htmlFor={"optA" + opt.value} style={{ margin: '0 5px' }}>{opt.text}</Label>
          </div>)
        })}
      </FormField>
      <FormField name="optB" value={model.optB}>
        <label>B Option:</label>
        {opts.optB.map(opt => {
          return (<div key={opt.value}>
            <RadioButton
              inputId={"optB" + opt.value}
              value={opt.value}
              groupValue={model.optB}
              onChange={(checked) => handleOpt("optB", opt.value, checked)}
            />
            <Label htmlFor={"optB" + opt.value} style={{ margin: '0 5px' }}>{opt.text}</Label>
          </div>)
        })}
      </FormField>
      <div>
        {JSON.stringify(model)}
      </div>

    </Form>
  );
}
export default App;
Logged
chrwei
Full Member
***
Posts: 219


View Profile Email
« Reply #1 on: April 27, 2021, 10:03:10 AM »

I'll add that adding the hack still results in a null key in the form model.  not the end of the world, but it's not right.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #2 on: April 28, 2021, 02:22:54 AM »

Please set the 'name' property for the RadioButton component.
Code:
<RadioButton
  inputId={"optA" + opt.value}
  name="..."
  value={opt.value}
  groupValue={model.optA}
  onChange={(checked) => handleOpt("optA", opt.value, checked)}
/>
Logged
chrwei
Full Member
***
Posts: 219


View Profile Email
« Reply #3 on: April 28, 2021, 08:23:45 AM »

I thought I had tried that... it works.

However, this is not needed on other components extended from FieldBase.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #4 on: April 28, 2021, 07:40:56 PM »

This issue has been fixed. Please try to update to the newest version.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!