Як встановити прапорець Поставлено прапорець У полі прапорця ReactJS?

У мене виникають проблеми з оновленням стану прапорця після того, як йому буде призначено значення за замовчуванням checked="checked"у React.

var rCheck = React.createElement('input',
                                 {type: 'checkbox', checked:'checked', value: true},
                                 'Check here');

Після призначення checked="checked"я не можу взаємодіяти зі станом прапорця, клацнувши, щоб зняти / встановити прапорець.

Щоб взаємодіяти з цим полем, вам потрібно оновити стан для прапорця, як тільки ви його зміните. І мати налаштування за замовчуванням, яке ви можете використовувати defaultChecked.

Приклад:

<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />

Є кілька способів досягти цього, ось декілька:

Написано за допомогою гачок штатів :

function Checkbox() {
  const [checked, setChecked] = React.useState(true);

  return (
    <label>
      <input type="checkbox"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
      Check Me!
    </label>
  );
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

Ось пряма демонстрація на JSBin .

Написано за допомогою компонентів :

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: true,
    };
  }
  toggleChange = () => {
    this.setState({
      isChecked: !this.state.isChecked,
    });
  }
  render() {
    return (
      <label>
        <input type="checkbox"
          checked={this.state.isChecked}
          onChange={this.toggleChange}
        />
        Check Me!
      </label>
    );
  }
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

Ось пряма демонстрація на JSBin .

Якщо прапорець створено лише з, React.createElementтоді використовується властивість defaultChecked.

React.createElement('input',{type: 'checkbox', defaultChecked: false});

Кредит на @nash_ag

У життєвому циклі візуалізації React атрибут значення на елементах форми перекриє значення в DOM. З неконтрольованим компонентом ви часто хочете, щоб React вказав початкове значення, але наступні оновлення залишаєте неконтрольованими. Для вирішення цього випадку замість значення можна вказати атрибут defaultValue або defaultChecked.

        <input
          type="checkbox"
          defaultChecked={true}
        />

Або

React.createElement('input',{type: 'checkbox', defaultChecked: true});

Будь ласка, перегляньте докладніші відомості про defaultCheckedпрапорець нижче: https://reactjs.org/docs/uncont kontroli-components.html#default- values

крім правильної відповіді, яку ви можете просто зробити: P

<input name="remember" type="checkbox" defaultChecked/>

Це працює

<input type="checkbox" value={props.key} defaultChecked={props.checked} ref={props.key} onChange={this.checkboxHandler} />

І функція init це

{this.viewCheckbox({ key: 'yourKey', text: 'yourText', checked: this.state.yourKey })}

Ви можете передати "true" або "" до встановленого прапорця вхідного поля. Порожні лапки ("") будуть розумітись як помилкові, а пункт буде відмінено.

let checked = variable === value ? "true" : "";
<input
     className="form-check-input"
    type="checkbox"
    value={variable}
    id={variable}
    name={variable}
    checked={checked}
/>
<label className="form-check-label">{variable}</label>

У моєму випадку я відчував, що "defaultChecked" не працює належним чином зі станами / умовами. Тому я використовував "перевірений" за допомогою "onChange" для переключення стану.

Напр.

checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}

Ось код, який я зробив деякий час тому, він може бути корисним. вам потрібно грати з цим рядком => this.state = {перевірено: false, перевірено2: true};

class Componente extends React.Component {
  constructor(props) {
    super(props);

    this.state = { checked: false, checked2: true};
    this.handleChange = this.handleChange.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);

  }  

  handleChange() {
    this.setState({
        checked: !this.state.checked      
    })
  }

  handleChange2() {
    this.setState({
        checked2: !this.state.checked2      
    })
  }

  render() {
    const togglecheck1 = this.state.checked ? 'hidden-check1' : '';
    const togglecheck2 = this.state.checked2 ? 'hidden-check2' : '';

    return <div>
        <div>
        <label>Check 1</label>
        <input type="checkbox" id="chk1"className="chk11" checked={ this.state.checked } onChange={ this.handleChange } />
        <label>Check 2</label>
        <input type="checkbox" id="chk2" className="chk22" checked={ this.state.checked2 } onChange={ this.handleChange2 } />
      </div>

      <div className={ togglecheck1 }>show hide div with check 1</div>
      <div className={ togglecheck2 }>show hide div with check 2</div>

    </div>;
  }
}

ReactDOM.render(
  <Componente />,
  document.getElementById('container')
);

CSS

.hidden-check1 {
  display: none;  
  }

.hidden-check2 {
  visibility: hidden;
}

HTML

  <div id="container">
      <!-- This element's contents will be replaced with your component. -->
  </div>

ось кодpen => http://codepen.io/parlop/pen/EKmaWM

Не робіть це занадто важко. Спочатку зрозумійте простий приклад, наведений нижче. Вам це буде зрозуміло. У цьому випадку, лише натиснувши прапорець, ми схопимо значення зі стану (спочатку воно неправдиве), змінимо його на інше значення (спочатку це правда) та встановимо стан відповідно. Якщо прапорець натиснути вдруге, він повторить той самий процес. Захопивши значення (тепер це правда), змініть його (на хибне) і потім встановіть стан відповідно (тепер воно знову хибне. Код надано нижче.

Частина 1

state = {
  verified: false
} // The verified state is now false

Частина 2

verifiedChange = e => {
  // e.preventDefault(); It's not needed
  const { verified } = e.target;
  this.setState({
    verified: !this.state.verified // It will make the default state value(false) at Part 1 to true 
  });
}; 

Частина 3

  <form> 
      <input
          type="checkbox"
          name="verified"
          id="verified"
          onChange={this.verifiedChange} // Triggers the function in the Part 2
          value={this.state.verified}
      />
      <label for="verified">
      <small>Verified</small>
      </label>
  </form>

це можна зробити за допомогою чистого js

              <Form.Group controlId="categoryStatus">
                <Form.Check
                  type="checkbox"
                  label="Category Status Active/In-active"
                  onChange={this.handleChecked}                 
                />
              </Form.Group>

  //Load category to form : to edit
  GetCategoryById(id) {
    this.UpdateId = id
    axios.get('http://localhost:4000/Category/edit/' + id)
      .then(response => {
        this.setState({
          category_name: response.data.category_name,
          category_description: response.data.category_description,
          is_active: response.data.is_active,
        });

        response.data.is_active == 1 ? document.getElementById("categoryStatus").checked = true : document.getElementById("categoryStatus").checked = false;
      })
      .catch(function (error) {
        console.log(error);
      })
  }

 <div className="form-group">
          <div className="checkbox">
            <label><input type="checkbox" value="" onChange={this.handleInputChange.bind(this)}  />Flagged</label>
            <br />
            <label><input type="checkbox" value=""  />Un Flagged</label>
          </div>
        </div

handleInputChange (подія) {

console.log("event",event.target.checked)   }

Наведена вище ручка надає вам значення істинного чи помилкового після перевіреного чи невірно перевіреного

Я встановлюю стан як будь-який [] тип. і в конструкторі встановити стан нульовим.

onServiceChange = (e) => {
    const {value} = e.target;
    const index = this.state.services.indexOf(value);
    const services = this.state.services.filter(item => item !== value);
    this.setState(prevState => ({
        services: index === -1 ? prevState.services.push(value) && prevState.services : this.state.services.filter(item => item !== value)
    }))
}

У вхідному елементі

this.onServiceChange (e)} /> this.onServiceChange (e)} /> this.onServiceChange (e)} /> this.onServiceChange (e)} />

Я зрозумів це через деякий час. Думав, що тобі це може допомогти :)