checkbox با استفاده از react و bootstrap چگونه پیاده سازی می شود؟
- فرشته حقیقی 4 سال قبل سوال کرد
- شما باید برای ارسال دیدگاه وارد شوید
برای ایجاد چک باکس به صورت زیر عمل می کنیم:
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;
- فرشته حقیقی 4 سال قبل پاسخ داد
- آخرین ویرایش 4 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید