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

keras

具有来自输入的动态值的单选按钮作为标签

1 个答案: