Государство не меняет Реагировать

Question

У меня есть форма с переключателями.Этот экран интерпретируется надстройкой React в браузере.

Мне интересно, почему значение value пусто и почему нет функции onChange, которая изменяет состояние.В состоянии у меня есть переменная checked: false при нажатии на кнопку, состояние должно измениться, что приведет к изменению стилей кнопок.

Это мой компонент, отвечающий за создание переключателя.Здесь он передает реквизиты от компонента, который создает форму.И в этом компоненте также держите государство ответственным за checked.

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,
      backgroundColor,
      backgroundColorChecked,
      borderColor,
      height,
      width,
      ...otherProps
    } = this.props;
    const { checked } = this.state;
    return (
      <InputGroup>
        <Input
          value={value}
          checked={checked}
          onChange={this.handleChange}
          style={{
            backgroundColor: checked ? `${backgroundColorChecked}` : `${backgroundColor}`,
            borderColor: `${borderColor}`,
            height: `${height}`,
            width: `${width}`,
          }}
          className="Test__questions-radio"
          {...otherProps}
        />
      </InputGroup>
    );
  }
}



RadioButton.propTypes = {
  backgroundColor: PropTypes.string,
  value: PropTypes.string.isRequired,
  borderColor: PropTypes.string.isRequired,
  height: PropTypes.string.isRequired,
  width: PropTypes.string.isRequired,
};

RadioButton.defaultProps = {
  backgroundColor: '',
};

Этот компонент переходит к

const QuestionsAnswerForm = ({
  onSubmit,
  initialValues,
}) => (
  <FinalForm
    initialValues={initialValues}
    onSubmit={onSubmit}
    render={({ handleSubmit }) => (
      <Form onSubmit={handleSubmit}>
        <FinalField name="rate">
          {({ input }) => (
            <FormGroup>
              <Radio
                value="more-unaware"
                type="radio"
                backgroundColorChecked="#94657e"
                backgroundColor="#fff9fc"
                borderColor="#94657e"
                height="2.375rem"
                width="2.375rem"
                {...input}
              />
            </FormGroup>
          )}
        </FinalField>
        <FinalField name="rate">
          {({ input }) => (
            <FormGroup>
              <Radio
                value="unaware"
                type="radio"
                backgroundColorChecked="#94657e"
                backgroundColor="#fff9fc"
                borderColor="#94657e"
                height="2.0625rem"
                width="2.0625rem"
                {...input}
              />
            </FormGroup>
          )}
        </FinalField>

      </Form>
    )}
  />
);

QuestionsAnswerForm.propTypes = {
  onSubmit: PropTypes.func,
};

QuestionsAnswerForm.defaultProps = {
  onSubmit: () => {},
};

Почему не передается значение?Почему функция onChange не работает?

Answer 1

Вы не можете снять отметку с переключателя, нажав на него.Вы можете использовать имя, чтобы сгруппировать их вместе, чтобы за один раз можно было проверить только одно имя в группе.Или вы можете заставить их быть правдивыми или ложными, как я сделал в приведенном ниже примере.

Вот вам пример Code Sandbox .