флажок = {ложно} изменение контролируемого ввода типа флажок для неконтролируемого ввода

Question

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

function CheckBox(props) {
 const id = props.id;
 const onChange = props.onChange;
 const flag = props.flag;
 const lock = props.lock;

if (lock === true) {
return (
  <React.Fragment>
    <input className="tgl tgl-skewed" id={id} type="checkbox" onChange={onChange} />
    <label className="tgl-btn" data-tg-off={flag + " is OFF"} data-tg-on={flag + " is ON"} htmlFor={id}></label>
  </React.Fragment>
)
} else {
return (
  <React.Fragment>
    <input className="tgl tgl-skewed" id={id} type="checkbox" disabled="disabled" checked={false} value={false}/>
    <label className="tgl-btn" data-tg-off={flag + " is OFF"} htmlFor={id}></label>
  </React.Fragment>
)}}

ошибка исчезает, когда я удаляю «checked = {false}», но мне это нужно ...

какие решения?

Answer 1

Если у вас есть onChange, вы не можете иметь фиксированное значение. Обычно onChange обновляет состояние, и это состояние будет использоваться как value

onChange означает, что вы можете управлять значением самостоятельно, поэтому ожидается, что значение состояния (или подпорки)