Состояние React не меняется

У меня есть форма с переключателями. Это экран, который интерпретируется надстройкой 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?


person Elder    schedule 14.12.2018    source источник


Ответы (1)


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

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

person Kyle Richardson    schedule 14.12.2018
comment
@KeyleRichardson Ваше решение в порядке, но что тогда, например, у меня есть 10 переключателей? Могу ли я создать массив из 10 элементов? А может быть, где-то вы встречали более оптимальное решение? - person Elder; 14.12.2018
comment
@Elder Почему что-то другое, кроме массива, может быть оптимальным? Массивы - это базовые объекты. Массив из 10 элементов очень мал ... запустите его в консоли _1 _ $ {el} @ $ {Date.now ()} _ 2_, и вы увидите, что он выполняет итерацию по 10 элементам, создает 10 функциональных контекстов выполнения, 10 шаблонных литералов. и записывает результаты на консоль менее чем за 2 миллисекунды. Мне кажется, это нормально. - person Kyle Richardson; 14.12.2018