import { useState } from "react";
function Reactarea()
{
let [w,setW] = useState(0);
let [l,setL] = useState(0);
let [a,setA] = useState(0);
function setWidth(e)
{
setW(e.target.value);
}
function setLength(e)
{
setL(e.target.value);
}
function rarea(e)
{
setA(w*l);
e.preventDefault();
}
return(
<div>
<form onSubmit={rarea}>
<input type="text" onChange={(e) => setWidth(e)} />
<br/>
<input type="text" onChange={(e) => setLength(e)} />
<br/>
<input type="submit" value="Calculate" />
</form>
<p>{a}</p>
</div>
);
}
export default Reactarea;
Example of Checkbox
import React from "react";
export class CheckboxExample extends React.Component
{
constructor(props)
{
super(props);
this.state = {fee1:0,fees2:0,fees3:0,fee:0,c1:'',c2:'',c3:'',c:''};
this.checkC = this.checkC.bind(this);
this.checkCPP = this.checkCPP.bind(this);
this.checkDs= this.checkDs.bind(this);
this.calc = this.calc.bind(this);
}
checkC(event)
{
if(event.target.checked)
{
this.setState({fee1:event.target.value});
this.setState({c1:event.target.name});
}
else
{
this.setState({fee1:0});
this.setState({c1:""});
}
}
checkCPP(event)
{
if(event.target.checked)
{
this.setState({fees2:event.target.value})
this.setState({c2:event.target.name})
}
else
{
this.setState({fees2:0});
this.setState({c2:""});
}
}
checkDs(event)
{
if(event.target.checked)
{
this.setState({fees3:event.target.value})
this.setState({c3:event.target.name})
}
else
{
this.setState({fees3:0});
this.setState({c3:""});
}
}
calc(event)
{
this.setState({fee:parseInt(this.state.fee1)+parseInt(this.state.fees2)+parseInt(this.state.fees3)});
this.setState({c:this.state.c1+ " "+this.state.c2+ " " +this.state.c3});
event.preventDefault();
}
render()
{
return(
<div>
<form>
<input type="checkbox" name="C" value="1000" onChange={this.checkC} />C<br/>
<input type="checkbox" name="CPP" value="2000" onChange={this.checkCPP} />CPP<br/>
<input type="checkbox" name="DS" value="3000" onChange={this.checkDs} />DS<br/>
<br></br>
<input type="submit" name="btnsubmit" value="Calculate" onClick={this.calc}/>
</form>
<div>Courses are {this.state.c} Fees are:- {this.state.fee}</div>
</div>
);
}
}
Listbox and Dropdownlist example:-
import React from "react";
export class CheckboxExample extends React.Component
{
constructor(props)
{
super(props);
this.state = {c1:'',c2:'',c:'',l:''};
this.ddl = this.ddl.bind(this);
this.lst = this.lst.bind(this);
this.calc = this.calc.bind(this);
}
calc(event)
{
this.setState({c:this.state.c1+ " "+this.state.l});
event.preventDefault();
}
ddl(event)
{
this.setState({c1:event.target.value})
}
lst(event)
{
var s = "";
// alert(event.target.options[0].selected);
for(var i=0;i<event.target.length;i++)
{
if(event.target.options[i].selected)
{
s = s + event.target.options[i].value;
}
}
this.setState({l:s})
}
render()
{
return(
<div>
<form>
<select onChange={this.ddl}>
<option value="C:1000">C</option>
<option value="CPP:2000">CPP</option>
<option value="DS:3000">DS</option>
</select>
<br/>
<br/>
<select onChange={this.lst} multiple>
<option value="C:1000">C</option>
<option value="CPP:2000">CPP</option>
<option value="DS:3000">DS</option>
</select>
<br></br>
<br></br>
<input type="submit" name="btnsubmit" value="Calculate" onClick={this.calc}/>
</form>
<div>Courses are {this.state.c} </div>
</div>
);
}
}
POST Answer of Questions and ASK to Doubt