React Checkbox Control SPFx
Interface
Step 1
export interface ITechnologies{
technology?:chkTechnology[],
checkboxSlectedValues?:string
}
export interface chkTechnology{
name:string,
isChecked:boolean,
lable:string,
cssClass?:any
}
.tsx file
Step 2
import { Label } from 'office-ui-fabric-react/lib/Label'
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { ITechnologies, chkTechnology } from './ICheckBoxControlstates'
Step 3
public constructor(prop: ICheckBoxControlProps, any) {
super(prop);
this.state = {
checkboxSlectedValues: "",
technology: [
{
lable: "Sharepoint",
name: "Sharepoint",
isChecked: false,
cssClass: styles.chkControl
},
{
lable: "SPFx",
name: "SPFx",
isChecked: false,
cssClass: styles.chkControl
},
]
}
}
Step 4
private async _onTechnologyChecked(ev: React.FormEvent<HTMLElement>, technolgy: chkTechnology) {
debugger;
const castEvent = ev as React.ChangeEvent<HTMLInputElement>;
const technology = this.state.technology.map(item => ({ ...item, isChecked: technolgy.name === item.name ? castEvent.target.checked : item.isChecked }));
this.setState({
technology,
checkboxSlectedValues: technology.filter(item => item.isChecked).map(item => item.name).join(';'),
})
}
Step 5
<div className={styles.chkHeading}>
<label className={styles.chkbixselecctedValuesLable && styles.chkHeadingLabel}>
<h2>CheckBox Control</h2>
</label>
</div>
<div>
{
this.state.technology.map(tech => (
<Checkbox
className={tech.cssClass}
label={tech.lable}
name={tech.name}
checked={tech.isChecked}
onChange={event => this._onTechnologyChecked(event, tech)} />
))
}
</div>
<div>
<label className={styles.chkbixselecctedValuesLable}> Selected Values : </label>
<Label>{this.state.checkboxSlectedValues}</Label>
</div>
You Tube Link for more Dtails : SharePoint Shine
Comments