Блог

Главная - Вопросы по программированию - Флажок с переменным значением по умолчанию

Флажок с переменным значением по умолчанию

#html #reactjs #checkbox

#HTML #reactjs #флажок

Вопрос:

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

 <div className="master">
    <input className="tgl tgl-skewed" id={id} type="checkbox" onChange={onChange} name={flag} checked={lock}/>
    <label className="slave tgl-btn" data-tg-off={flag   " is OFF"} data-tg-on={flag   " is ON"} htmlFor={id}></label>
</div>

В приведенном выше примере я получаю статус по умолчанию (блокировка), который может быть «true» или «false», при этом флажок с «установлен» на «снят». К сожалению, это также делает невозможным изменение этого статуса, нажав на соответствующий флажок.

Есть идеи?

Ответ №1:

Вы можете использовать defaultChecked реквизиты для входного тега в react.

 <input className="tgl tgl-skewed" id={id} type="checkbox" onChange={onChange} name={flag} defaultChecked={lock}/>

Ответ №2:

Переведите lock в состояние и попросите обработчик изменений переключить логическое значение:

 const App = ({ lock }) => {
  const [checked, setChecked] = React.useState(lock);
  const onChange = () => setChecked(!checked);
  const id = 'foo';
  return (
    <div className="master">
      <input className="tgl tgl-skewed" id={id} type="checkbox" onChange={onChange} checked={checked}/>
      <label className="slave tgl-btn" htmlFor={id}></label>
    </div>
  );
};
ReactDOM.render(<App lock={true} />, document.querySelector('.react'));  
 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>