Facebook
From Artur Grabowski, 1 Year ago, written in JavaScript.
This paste is a reply to Type of web from Artur Grabowski - view diff
Embed
Download Paste or View Raw
Hits: 153
  1. import * as React from 'react';
  2.  
  3. class MyFirstForm extends React.Component {
  4.         state = {
  5.                 name: '',
  6.                 color: 'blue',
  7.                 message: '',
  8.                 isChecked: true,
  9.                 choice: ""
  10.         };
  11.  
  12.         handleChange(e, val) {
  13.  
  14.                 switch (val) {
  15.                         case "name": {
  16.                                 this.setState({
  17.                                         name: e.target.value
  18.                                 });
  19.                                 break;
  20.                         }
  21.                         case "color": {
  22.                                 this.setState({
  23.                                         color: e.target.value
  24.                                 });
  25.                                 break;
  26.                         }
  27.                         case "message": {
  28.                                 this.setState({
  29.                                         message: e.target.value
  30.                                 });
  31.                                 break;
  32.                         }
  33.                         case "isChecked": {
  34.                                 this.setState({
  35.                                         isChecked: e.target.checked
  36.                                 });
  37.                                 break;
  38.                         }
  39.                         default:
  40.                                 console.log("cos nie dziala w switchu");
  41.                 }
  42.         }
  43.        
  44.  
  45.         render() {
  46.                 return (
  47.                         <div>
  48.                                 <input value={this.state.name} onChange={(e) => this.handleChange(e, "name")}/>
  49.                                 <select value={this.state.color} onChange={(e) => this.handleChange(e, "color")}>
  50.                                         <option value="red">Czerwony</option>
  51.                                         <option value="blue">Niebieski</option>
  52.                                         <option value="green">Zielony</option>
  53.                                 </select>
  54.                                 <textarea value={this.state.message} id="text" onChange={(e) => this.handleChange(e, "message")}/>
  55.                                 <label>
  56.                                         <input type="checkbox" id={"checkbox"} checked={this.state.isChecked} onChange={(e) => this.handleChange(e, "isChecked")}/>
  57.                                 </label>
  58.                         </div>
  59.                 );
  60.         }
  61. }
  62.  
  63. export default MyFirstForm;
  64.  
  65.