چگونه می‌توان مقدار پیش‌فرض checked را برای checkbox در ReactJS تعیین کرد؟

mohsen•2 هفته قبل
ارسال شده در
react

در React، برای مدیریت وضعیت checkbox و تعیین مقدار پیش‌فرض آن، روش‌های مختلفی وجود دارد که استفاده از defaultChecked یکی از این روش‌هاست. اگر بخواهید یک checkbox را با مقدار پیش‌فرض checked بسازید و در عین حال بتوانید با کلیک بر روی آن وضعیت آن را تغییر دهید، باید از state برای مدیریت این مقدار استفاده کنید.

استفاده از defaultChecked و State

اگر checkbox را به‌صورت عادی و بدون استفاده از React.createElement ایجاد کنید، می‌توانید از defaultChecked بهره ببرید:

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

استفاده از React.createElement

زمانی که checkbox را با استفاده از React.createElement ایجاد می‌کنید، باید از defaultChecked استفاده کنید تا وضعیت پیش‌فرض آن تعیین شود. به عنوان مثال:

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

روش دیگر: استفاده از Hooks و State

اگر بخواهید از کامپوننت های تابعی (Functional Components) استفاده کنید، می‌توانید از State Hooks بهره ببرید:

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

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

استفاده از کلاس‌ها

اگر از کلاسی برای ایجاد checkbox استفاده می‌کنید، می‌توانید وضعیت checked را به شکل زیر مدیریت کنید:

      class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isChecked: true};
  }
  
  toggleChange = () => {
    this.setState((state) => ({isChecked: !state.isChecked}));
  }

  render() {
    return (
      <label>
        <input type="checkbox"
          defaultChecked={this.state.isChecked}
          onChange={this.toggleChange}
        />
        Check Me!
      </label>
    );
  }
}
رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!