我正在尝试创建一个单选按钮组组件,其中单选选项之一的值由输入动态设置为标签。我经常在表单中看到这些,并且之前没有使用 React 创建它,但是在使用 React 和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:"}/>
}
}
我有一种感觉,这与重新渲染有关,因为无状态的子组件会让我相信我必须跟踪哪些组件是重点的,然后将其作为 Prop 传递下来。是这样吗?
有人可以提供一个简单的“React Way”示例来实现此功能吗?
最佳答案
我认为您应该将输入值和 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);
关于javascript - 将输入的动态值作为标签的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52895554/