کار با فرم ها در ری اکت

				
					class Form extends Component {
    state = {
        username:'',
        comment:'',
        topic:'React',
    }
 
    handleUserChange = (event) =>{
    this.setState({
        username:event.target.value
    })
}
 
    handleChangeComment = (event) => {
        this.setState({
            comment:event.target.value
        })
    }
 
    handleChangeTopic = (event) => {
        this.setState({
            topic:event.target.value
        })
    }
 
    handleSubmit = (e) => {
        alert(
              [this.state.username,
              this.state.comment,
              this.state.topic]
            )
            e.preventDefault()
        //alert("Bingo")
    }
render() {
        return (
           
            <form onSubmit={this.handleSubmit}>
                <div>
                    <label>Username: </label>
                    <input type="text" value={this.state.username} onChange={this.handleUserChange} />
                </div>
                <div>
                    <label>Comments: </label>
                    <textarea value={this.state.comment} onChange={this.handleChangeComment} />
                </div>
                <div>
                    <label>Topic:</label>
                    <select value={this.state.topic} onChange={this.handleChangeTopic}>
                        <option value="React">React</option>
                        <option value="Angular">Angular</option>
                    </select>
                </div>
                <button type='submit'>send</button>
            </form>
           
        );
    }
}
 
export default Form;