Skip to content

Instantly share code, notes, and snippets.

@donavon
Last active August 25, 2016 18:19
Show Gist options
  • Save donavon/d7abef94077fc0135da55a7d704d7e5e to your computer and use it in GitHub Desktop.
Save donavon/d7abef94077fc0135da55a7d704d7e5e to your computer and use it in GitHub Desktop.
class SignInForm extends React.Component {
constructor() {
super();
this.state = {
username: "",
password: ""
};
}
onChange(key, value) {
this.setState({ [key]: value});
}
onSubmit(ev) {
ev.preventDefault();
const username = this.state.username;
const password = this.state.password;
alert (`You submitted username=${username} password=${password}`);
}
render() {
const onUsernameChange = ev => this.onChange("username", ev.target.value);
const onPasswordChange = ev => this.onChange("password", ev.target.value);
return (
<form onSubmit={ev => this.onSubmit(ev)}>
<p>Username: <input name="username" type="text" value={this.state.username} onChange={onUsernameChange} /></p>
<p>Password: <input name="password" type="password" value={this.state.password} onChange={onPasswordChange} /></p>
<button type="submit">Sign In</button>
</form>
);
}
}
class SignInForm extends React.Component {
onSubmit(ev) {
ev.preventDefault();
const username = this.refs.username.value;
const password = this.refs.password.value;
alert (`You submitted username=${username} password=${password}`);
}
render() {
return (
<form onSubmit={ev => this.onSubmit(ev)}>
<p>Username: <input name="username" type="text" ref="username" /></p>
<p>Password: <input name="password" type="password" ref="password" /></p>
<button type="submit">Sign In</button>
</form>
);
}
}
const onSubmit = ev => {
ev.preventDefault();
const username = ev.target.elements.username.value;
const password = ev.target.elements.password.value;
alert (`You submitted username=${username} password=${password}`);
};
const SignInForm = () => (
<form onSubmit={onSubmit}>
<p>Username: <input name="username" type="text" /></p>
<p>Password: <input name="password" type="password" /></p>
<button type="submit">Sign In</button>
</form>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment