Print Page - Radio button in forms

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;

EasyUI Forum

General Category => EasyUI for React => Topic started by: chrwei on April 27, 2021, 10:01:28 AM