具有來自輸入的動態值的單選按鈕作為標簽

Question

我正在嘗試創建一個單選組組件，其中一個單選選項的值由輸入動態設置為標簽。 我經常以表格的形式看到它們，並且以前沒有進行反應就創建了它們，但是在反應和material-ui庫方面遇到了麻煩。 值的傳遞似乎從輸入到單選按鈕，因此到選定的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作為輸入組件，因為它被用作子組件。

這段工作代碼只是為了給您一些想法。 我假設您的RadioGroup只有一個輸入： 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);