Radio button in forms

[chrwei]

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;

[chrwei]

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.

[jarry]

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)}
/>

[chrwei]

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

However, this is not needed on other components extended from FieldBase.

[jarry]

This issue has been fixed. Please try to update to the newest version.