import * as React from 'react';
class MyFirstForm extends React.Component {
state = {
name: '',
color: 'blue',
message: '',
isChecked: true,
choice: ""
};
handleChange(e, val) {
switch (val) {
case "name": {
this.setState({
name: e.target.value
});
break;
}
case "color": {
this.setState({
color: e.target.value
});
break;
}
case "message": {
this.setState({
message: e.target.value
});
break;
}
case "isChecked": {
this.setState({
isChecked: e.target.checked
});
break;
}
default:
console.log("cos nie dziala w switchu");
}
}
render() {
return (
<div>
<input value={this.state.name} onChange={(e) => this.handleChange(e, "name")}/>
<select value={this.state.color} onChange={(e) => this.handleChange(e, "color")}>
<option value="red">Czerwony</option>
<option value="blue">Niebieski</option>
<option value="green">Zielony</option>
</select>
<textarea value={this.state.message} id="text" onChange={(e) => this.handleChange(e, "message")}/>
<label>
<input type="checkbox" id={"checkbox"} checked={this.state.isChecked} onChange={(e) => this.handleChange(e, "isChecked")}/>
</label>
</div>
);
}
}
export default MyFirstForm;
{"html5":"htmlmixed","css":"css","javascript":"javascript","php":"php","python":"python","ruby":"ruby","lua":"text\/x-lua","bash":"text\/x-sh","go":"go","c":"text\/x-csrc","cpp":"text\/x-c++src","diff":"diff","latex":"stex","sql":"sql","xml":"xml","apl":"apl","asterisk":"asterisk","c_loadrunner":"text\/x-csrc","c_mac":"text\/x-csrc","coffeescript":"text\/x-coffeescript","csharp":"text\/x-csharp","d":"d","ecmascript":"javascript","erlang":"erlang","groovy":"text\/x-groovy","haskell":"text\/x-haskell","haxe":"text\/x-haxe","html4strict":"htmlmixed","java":"text\/x-java","java5":"text\/x-java","jquery":"javascript","mirc":"mirc","mysql":"sql","ocaml":"text\/x-ocaml","pascal":"text\/x-pascal","perl":"perl","perl6":"perl","plsql":"sql","properties":"text\/x-properties","q":"text\/x-q","scala":"scala","scheme":"text\/x-scheme","tcl":"text\/x-tcl","vb":"text\/x-vb","verilog":"text\/x-verilog","yaml":"text\/x-yaml","z80":"text\/x-z80"}