Компонент React меняет флажок неконтролируемого ввода типа - PullRequest
Новая
       11

Компонент React меняет флажок неконтролируемого ввода типа

0 голосов
/ 06 мая 2020

Наличие следующего компонента React для настраиваемого флажка, в котором значения передаются как реквизиты от родителя 

export const CheckBox = (props) => {
  let closeClass;

  if (!props.hint && props.hint == "") {
    closeClass = "no-hint";
  }
  return (
    <div className={"field-wrapper checkbox-button-grouped"}>
      <label htmlFor={`checkbox_${props.value}`}>
        <input
          onChange={props.handleCheckChieldElement}
          type="checkbox"
          name={props.name}
          id={`checkbox_${props.value}`}
          className={"input-field"}
          checked={props.isChecked}
          value={props.value || ""}
        />
        <div className="label-text">
          <div className={"label-name"}>{props.label}</div>
          {props.hint && props.hint !== "" ? (
            <div className={"info-icon"}>
              <InfoIcon className={"info-icon"} />
            </div>
          ) : null}
          <div className={"hint"}>{props.hint}</div>
          <UncheckIcon className={classnames("uncheck", closeClass)} />
          <Checkmark className={"ok-icon"} />
        </div>
      </label>
    </div>
  );
};

export default CheckBox;

Я продолжаю получать следующую ошибку:

Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Что я делаю не так в этом случае?

Ответы [ 2 ]

1 голос
/ 06 мая 2020

props.isChecked, вероятно, равно null или undefined, вы можете решить это следующим образом: 

checked={props.isChecked || false}
0 голосов
/ 06 мая 2020

Предупреждение. Компонент изменяет флажок неконтролируемого ввода типа, который будет контролироваться

Если вы получаете эту ошибку, это означает, что значение, которое вы вводите в поле ввода, равно не обновляется вашей функцией onChange.

Состояние значения, назначенное любому входу, должно быть изменено только с помощью функции onChange, иначе вы получите это предупреждение.

Также возможно, что значение равно undefined, как только будет выполнено действие onChange.

В вашем случае объявите

isChecked как логическое с начальным значением false или true, как вам нравится.

Если вы используете ловушку 

const [isChecked, setIsChecked] = React.useState(false);

для компонента класса 

this.state = {
   isChecked: false
}

Вот рабочий код в песочнице кода код

...