handleSubmit = (e) => {
if(e.keyCode === 13){
const newNames = [...this.state.names];
newNames.push(this.state.name);
this.setState({ names: newNames, name: '' });
}
}Controlled Component
onChange = e => {
this.setState({ inputValue : e.target.value })
}<input
type="text"
onChange={this.onChange}
value={this.state.value} />Controlled Component
I princip alla inputfält vi skrivit hitills
Värdet och uppdateringen sker via Reacts flöde
Inte direkt via DOMen som vi gjort i VanillaJS
Uncontrolled Component
När du inte har använder det flöde vi använt
React har inte kontroll på elementet, och kan inte fungera "som det ska".
const input= document.getElementById('myInput').value;refs
Refs kan också användas för detta
Mindre "reactigt", svårare att hantera
Vissa företag har styleguide: "Inga refs någonsin"
Om man verkligen inte pallar state
<input
ref={node => {this.input = node;}}
type="text" />Sparar hela noden i this.input
input
<input type="text" />
<input
type="text"
value={this.state.value}
onChange={this.onChange} /><input type="checkbox" />
<input
type="checkbox"
checked={this.state.checked}
onChange={this.onChange} />onChange = e => {
this.setState({ checked: e.target.checked});
}<select></select>
<select value={this.state.value}
onChange={this.onChange}>
<option value="Steffe!"> Steffe </option>
<option value="Inte Steffe!"> Inte Steffe! </option>
</select>Man behöver inte alltid lyssna på keyCode/key såklart 😬
<form></form>
<form onSubmit={this.onSubmit}>
<input
type="text"
name="value"
value={this.state.value}
onChange={this.onChange}/>
</form>Observera, formuläret sköter inte inputfältet, formuläret sköter bara vad som händer vid enter/submit
onSubmit = (e) => {
e.preventDefault();
console.log(this.state.value); //loggar vadsom
} Här måste vi stoppa formuläret från att skickas iväg
Nu: implementera en LoginForm tillsammans
Eftermiddag: Utöka gårdagens kod samt loginformuläret
Ingen genomgång i eftermiddag