Class Form
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Welcome extends Component{
constructor(props){
super(props);
this.state = {
username:'',
address:'',
topic:''
}
}
handleusername=(e) =>{
this.setState({
username:e.target.value
})
}
handleaddress=(e) =>{
this.setState({
address:e.target.value
})
}
handletopic=(e) =>{
this.setState({
topic:e.target.value
})
}
handleSubmit=(e)=>{
alert(`${this.state.username} ${this.state.address} ${this.state.topic}`);
e.preventDefault()
console.warn(this.state.username)
}
render(){
return(
<>
<form onSubmit={this.handleSubmit}>
<div>
<label>User name</label>
<input value={this.state.username} type="text" onChange={this.handleusername}/>
</div>
<div>
<label>Address</label>
<input value={this.state.address} type="text" onChange={this.handleaddress}/>
</div>
<div>
<label>Topic</label>
<select value={this.state.value} onChange={this.handletopic}>
<option value="Html">Html</option>
<option value="CSS">CSS</option>
<option value="Angulr">Angular</option>
</select>
</div>
<button type="submit">Submit</button>
</form>
</>
)
}
}
ReactDOM.render( <Welcome/>,
document.getElementById('root')
);
