EN

Search
Close this search box.

موستانگ، وحشیِ دوست داشتنی

پاسخ داده شد
0
0

checkbox با استفاده از react و bootstrap  چگونه پیاده سازی می شود؟

  • شما باید برای ارسال دیدگاه شوید
پاسخ عالی
0
0

برای  ایجاد چک باکس به صورت زیر عمل می کنیم:

import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

class App extends Component {

  // Checkbox Initial State
  state = {
    react: false,
    boootstrap: false,
    jsp: false,
   
  };

  // React Checkboxes onChange Methods
  onChangereact = () => {
    this.setState(initialState => ({
      react: !initialState.react,
    }));
  }

  onChangeboootstrap = () => {
    this.setState(initialState => ({
      boootstrap: !initialState.boootstrap,
    }));
  }

  onChangejsp = () => {
    this.setState(initialState => ({
      jsp: !initialState.jsp,
    }));
  }

  // Submit
  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
      <div className="App">
        <h2>Store Multiple Checkboxes Values in React</h2>
        <form onSubmit={this.onSubmit}>
          <div className="form-check">
            <label className="form-check-label">
              <input type="checkbox"
                checked={this.state.react}
                onChange={this.onChangereact}
                className="form-check-input"
              />
              Apple
            </label>
          </div>

          <div className="form-check">
            <label className="form-check-label">
              <input type="checkbox"
                checked={this.state.bootstrap}
                onChange={this.onChangebootstrap}
                className="form-check-input"
              />
              Avocado
            </label>
          </div>

          <div className="form-check">
            <label className="form-check-label">
              <input type="checkbox"
                checked={this.state.jsp}
                onChange={this.onChangejsp}
                className="form-check-input"
              />
              Banana
            </label>
          </div>

             
          <div className="form-group">
            <button className="btn btn-success">
              Save
            </button>
          </div>
        </form>
      </div>
    );
  }
}

export default App;
  • شما باید برای ارسال دیدگاه شوید
نمایش 1 نتیجه
پاسخ شما
اگر قبلاً حساب کاربری دارید با پر کردن فیلد های زیر یا به عنوان مهمان ارسال کنید.
نام*
ایمیل*
وب سایت