在React中动态更改选中的单选按钮的样式

Question

我有7个按钮的收音机类型。每个按钮具有不同的样式，并且在checked=true时必须具有不同的外观。我希望他们在检查时更改样式。 这是我的组件，负责创建单按钮单选外观

class RadioButton extends Component {
  constructor() {
    super();
    this.state = {
      checked: false,
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    const { checked } = this.state;
    this.setState({
      checked: !checked,
    });
  }

  render() {
    const {
      value,
      name,
      backgroundColor,
      backgroundColorChecked,
      borderColor,
      height,
      width,
      ...otherProps
    } = this.props;
    const { checked } = this.state;
    return (
      <InputGroup>
        <Input
          name={name}
          value={value}
          checked={checked}
          onChange={this.handleChange}
          style={{
            backgroundColor: checked ? `${backgroundColorChecked}` : `${backgroundColor}`,
            borderColor: `${borderColor}`,
            height: `${height}`,
            width: `${width}`,
          }}
          {...otherProps}
        />
      </InputGroup>
    );
  }
}

这是我负责创建一些按钮单选按钮的组件

 <FinalField name="rate">
          {({ input }) => (
            <FormGroup>
              <RadioButton
                value="capable"
                type="radio"
                backgroundColorChecked="#6baf8f"
                backgroundColor="#f5fffa"
                borderColor="#6baf8f"
                height="1.8125rem"
                width="1.8125rem"
                {...input}
              />
            </FormGroup>
          )}
        </FinalField>

在控制台中，我收到两个错误You must pass 'type="radio"' prop to your Field(rate) component. Without it we don't know how to unpack your 'value' prop - "undefined". 和Failed prop type: The prop 'style' is marked as required in 'RadioButton', but its value is 'undefined'。

我不知道为什么会出现这些错误以及如何解决它们。感谢所有提示。

Answer 1

您必须将'type =“ radio”'属性传递给Field（rate）组件。

此问题意味着您需要在RadioButton类的输入元素中添加'type =“ radio”'。

<Input
          type="radio"
          name={name}
          value={value}
          checked={checked}
          onChange={this.handleChange}
          style={{
            backgroundColor: checked ? `${backgroundColorChecked}` : `${backgroundColor}`,
            borderColor: `${borderColor}`,
            height: `${height}`,
            width: `${width}`,
          }}
          {...otherProps}
        />

---

道具类型失败：

我假设您已经在RadioButton类中定义了propType，如下所示：

RadioButton.protoTypes = {
    style: ProtoTypes.object.isRequired
}

但是，style属性没有传递给RadioButton类。