Динамическое изменение стиля отмеченных переключателей в 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"' prop вашему компоненту Field (rate).

Эта проблема означает, что вам нужно добавить 'type = "radio"' к элементу input в классе RadioButton.

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

---

Ошибка типа проп:

Я предполагаю, что вы определили propType в классе RadioButton следующим образом:

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

Однако свойство стиляне перешел в класс RadioButton.