Радиокнопка с динамическим значением от входа в качестве метки

Question

Я пытаюсь создать компонент группы радио, в котором значение одного из параметров радио динамически устанавливается входом в качестве метки.Я часто вижу их в формах, и создал их без реакции ранее, но у меня проблемы с реакцией и библиотекой материалов.Передача значений, кажется, работает от входа к переключателю и, следовательно, к компоненту радиогруппы material-ui, когда он выбран, но он не фокусируется (и отменяет выбор переключателя, если он был выбран) после каждого нажатия клавиши, поэтому я долженнажмите на вход / метку (и повторно проверьте переключатель), чтобы продолжить вводить по одному символу за раз.

Код ниже:

import {FormControl, FormControlLabel, FormLabel, Radio} from "@material-ui/core";
import RadioGroup from "@material-ui/core/RadioGroup/RadioGroup";
import React from "react";
import Input from "@material-ui/core/Input/Input";


const MUIRadioGroup = ({ classes, isSubmitting, label, name, value, onChange, controls }) => {
    return (<FormControl component="fieldset" className={classes.formControl}>
            <FormLabel component="legend">{label}</FormLabel>
            <RadioGroup
                aria-label={label}
                name={name}
                className={classes.group}
                value={value}
                onChange={onChange}
            >
                {controls.map(({ value, disabled, label, ...rest }, i) => {
                  return (<FormControlLabel
                    key={value+i}
                    value={value}
                    disabled={ disabled || isSubmitting }
                    control={ <Radio disabled={ disabled || isSubmitting }/> }
                    label={ label }
                  />)
                })}
            </RadioGroup>
        </FormControl>)
};

class Test extends React.Component {
    state = {
        value: undefined,  // so we don't default select the radio with blank input
        radioInputValue: ''
    }

    handleChange = (e) => {
        this.setState({ value: e.target.value });
    };

    handleRadioInputChange = (e) => {
        this.setState({ radioInputValue: e.target.value });
    };

    render() {
        const controls=[
                {value: '1', label: 'Choice 1', disabled: false},
                {value: '2', label: 'Choice 2', disabled: false},
                {
                    value: this.state.radioInputValue,
                    label: <Input
                        id={'Ga-radio-input'}
                        key={'Ga-radio-input'}
                        onChange={this.handleRadioInputChange}
                        name={'Ga-radio-input'}
                        value={this.state.radioInputValue}
                    />,
                    disabled: false}
            ];
        return <MUIRadioGroup controls={controls} value={this.state.value} onChange={this.handleChange} isSubmitting={false} label={"Choose one:"}/>
    }
}

У меня такое ощущение, что это как-то связано с повторным рендерингом из-за дочерних компонентов без состояния, что заставило бы меня поверить, что я должен отследить, какие компоненты сфокусированы, а затемпередать это как опору.Так ли это?

Может ли кто-нибудь привести простой пример "Пути реагирования", чтобы это сработало?

Answer 1

Я думаю, вы должны передать реквизиты, такие как входное значение и функцию onInputChange, в MUIRadioGroup для вашего компонента Input, поскольку он используется в качестве дочернего компонента.

Этот рабочий код просто для того, чтобы дать вам некоторое представление.Я предположил, что у вас есть только один вход для вашей радиогруппы: https://codesandbox.io/s/1z65z506zl

import {
  FormControl,
  FormControlLabel,
  FormLabel,
  Radio
} from "@material-ui/core";
import RadioGroup from "@material-ui/core/RadioGroup/RadioGroup";
import React from "react";
import ReactDOM from "react-dom";
import Input from "@material-ui/core/Input/Input";

const MUIRadioGroup = ({
  classes,
  isSubmitting,
  label,
  name,
  value,
  onChange,
  controls,
  InputVal,
  onInputChange
}) => {
  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">{label}</FormLabel>
      <RadioGroup
        aria-label={label}
        name={name}
        // className={classes.group}
        value={value}
        onChange={onChange}
      >
        {controls.map(({ value, disabled, label, ...rest }, i) => {
          return (
            <FormControlLabel
              key={value + i}
              value={label ? value : InputVal}
              disabled={disabled || isSubmitting}
              control={<Radio disabled={disabled || isSubmitting} />}
              label={
                label ? (
                  label
                ) : (
                  <Input
                    id={"Ga-radio-input"}
                    key={"Ga-radio-input"}
                    onChange={onInputChange}
                    name={"Ga-radio-input"}
                    value={InputVal}
                  />
                )
              }
            />
          );
        })}
      </RadioGroup>
    </FormControl>
  );
};

class Test extends React.Component {
  state = {
    value: undefined, // so we don't default select the radio with blank input
    radioInputValue: ""
  };

  handleChange = e => {
    this.setState({ value: e.target.value }, () =>
      console.log(this.state.value)
    );
  };

  handleRadioInputChange = e => {
    this.setState({ radioInputValue: e.target.value }, () => {
      console.log(this.state.radioInputValue);
    });
  };

  render() {
    const controls = [
      { value: "1", label: "Choice 1", disabled: false },
      { value: "2", label: "Choice 2", disabled: false },
      {
        value: "",
        label: null,
        disabled: false
      }
    ];
    return (
      <MUIRadioGroup
        controls={controls}
        value={this.state.value}
        onChange={this.handleChange}
        isSubmitting={false}
        label={"Choose one:"}
        InputVal={this.state.radioInputValue}
        onInputChange={this.handleRadioInputChange}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Test />, rootElement);