{"size": 1007, "ext": "js", "max_stars_repo_path": "Chapter06/9_Understanding_refs_and_how_to_use_them/refs.js", "max_stars_repo_name": "tmy2017/MERN-Quick-Start-Guide", "max_stars_repo_stars_event_min_datetime": "2018-06-07T16:03:04.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-24T08:14:32.000Z", "max_issues_repo_path": "Chapter06/9_Understanding_refs_and_how_to_use_them/refs.js", "max_issues_repo_name": "tmy2017/MERN-Quick-Start-Guide", "max_issues_repo_issues_event_min_datetime": "2022-01-22T01:42:10.000Z", "max_issues_repo_issues_event_max_datetime": "2022-01-22T01:42:10.000Z", "max_forks_repo_path": "Chapter06/9_Understanding_refs_and_how_to_use_them/refs.js", "max_forks_repo_name": "tmy2017/MERN-Quick-Start-Guide", "max_forks_repo_forks_event_min_datetime": "2018-06-08T19:52:26.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-31T18:02:41.000Z"}
{"max_stars_count": 44, "max_issues_count": 1, "max_forks_count": 33, "avg_line_length": 23.4186046512, "max_line_length": 52, "alphanum_fraction": 0.6554121152}
import * as React from 'react'
import * as ReactDOM from 'react-dom'

class LoginForm extends React.Component {
	refForm = React.createRef()
	constructor(props) {
		super(props)
		this.state = {}
		this.onSubmit = this.onSubmit.bind(this)
		this.onClick = this.onClick.bind(this)
	}
	onSubmit(event) {
		const form = this.refForm.current
		const data = new FormData(form)
		this.setState({
			user: data.get('user'),
			pass: data.get('pass'),
		})
		event.preventDefault()
	}
	onClick(event) {
		const form = this.refForm.current
		form.dispatchEvent(new Event('submit'))
	}
	render() {
		const { onSubmit, onClick, refForm, state } = this
		return (
			<React.Fragment>
				<form onSubmit={onSubmit} ref={refForm}>
					<input type="text" name="user" />
					<input type="text" name="pass" />
				</form>
				<button onClick={onClick}>LogIn</button>
				<pre>{JSON.stringify(state, null, 2)}</pre>
			</React.Fragment>
		)
	}
}
ReactDOM.render(
	<LoginForm />,
	document.querySelector('[role="main"]'),
)
