
[EN] Let’s Write – these forms…
The speed of work with React looks like a sinusoid. First very slowly, then faster and faster and again less code. Aside from the amount of time I have, this state of affairs is due to the difficulty I encounter. At first, you know, you have to enter the code. Then we learned the basics, so the next elements go forward. Then the next obstacle that slows work. Once they are resolved, there will definitely be an acceleration time.
The first two steps are behind me. Time for the third.
Login form
In the previous post, I mentioned that I take for forms and adding handlers for inputs. For starters, I took the login form because it has fewer fields so it’ll go faster.
I added handlers for each input. I know, all managing of the state is a responsibility of Redux but I decided that the fields values are locally so I added state in the component. Container for login form looks like this:
const LoginContainer = React.createClass({ getInitialState () { return { username: "", password: "", remember: false } }, render: function() { return ( <Login formState={this.state} usernameHandler={this.usernameChangeHandler} passwordHandler={this.passwordChangeHandler} rememberMeHandler={this.rememberMeChangeHandler} loginUser={this.loginUser} /> ) }, loginUser: function() { store.dispatch(commonActions.blockUi()) var data = this.state; setTimeout(() => { store.dispatch(userActions.loginUserSuccess({ firstName: 'Marek', lastName: 'Zając' })) store.dispatch(commonActions.unblockUi()) browserHistory.push('/') }, 2000) }, //changeHandlers usernameChangeHandler: function(event) { this.setState({username: event.target.value}) }, passwordChangeHandler: function(event) { this.setState({password: event.target.value}) }, rememberMeChangeHandler: function(event) { this.setState({remember: event.target.checked}) } })
I don’t know if I’m doing well in passing the state in this way, ie by passing the entire state variable. Maybe I should do it differently? Write in the comments :)
I have the same doubts about the handlers. In login form, I pass them individually. Later you’ll see that I did it a little differently in registration form – I added an object with all handlers so I have fewer parameters for the view.
This strange construction in method loginUser() is using to testing blocking screen when sending a request. I haven’t server yet so I have to somehow simulate when sending data :D
Views and code responsible for logic I divided into separate components because I saw it on this page: https://css-tricks.com/learning-react-container-components/. I think it makes sense.
Login component was only enriched by the use of parameters of input values and events onChange:
const Login = React.createClass({ render: function() { return ( <Row> <Col md={4}> </Col> <Col md={4}> <Form horizontal> <FormGroup controlId='email'> <Col componentClass={ControlLabel} sm={2}> Email </Col> <Col sm={10}> <FormControl value={this.props.formState.username} onChange={this.props.usernameHandler} type='email' placeholder='Email'/> </Col> </FormGroup> <FormGroup controlId='password'> <Col componentClass={ControlLabel} sm={2}> Password </Col> <Col sm={10}> <FormControl value={this.props.formState.password} onChange={this.props.passwordHandler} type='password' placeholder='Password'/> </Col> </FormGroup> <FormGroup controlId='remember-me'> <Col smOffset={2} sm={10}> <Checkbox onChange={this.props.rememberMeHandler} checked={this.props.formState.remember}>Remember me</Checkbox> </Col> </FormGroup> <FormGroup> <Col smOffset={2} sm={10}> <Button onClick={this.props.loginUser}> Sign in </Button> </Col> </FormGroup> </Form> </Col> </Row> ) } })
By making these forms, I see that I’ll have to split them into smaller components.
I don’t show screenshots because the look hasn’t changed.
Registration form
With the registration form didn’t go so easily because here I had more fields. The biggest change is that I closed the handlers in one variable that I pass to the view.
const RegisterContainer = React.createClass({ getInitialState() { return { firstName: "", lastName: "", email: "", password: "", repeatPassword: "", acceptTAC: false } }, render: function() { return ( <Register formState={this.state} registerUser={this.registerUser} handlers={this.inputHandlers} ></Register> ) }, registerUser() { if(!this.state.firstName) { } return true; }, inputHandlers: { firstNameChangeHandler: function(event) { this.setState({firstName: event.target.value}) }, lastNameChangeHandler: function(event) { this.setState({lastName: event.target.value}) }, emailChangeHandler: function(event){ this.setState({email: event.target.value}) }, passwordChangeHandler: function(event) { this.setState({password: event.target.value}) }, repeatPasswordChangeHandler: function(event) { this.setState({repeatPassword: event.target.value}) }, acceptTACChangeHandler: function(event) { this.setState({acceptTAC: event.target.checked}) } } })
Another obstacle
While adding handlers for registration form I remembered that I had to add another pretty important thing – validation. It would be cool to see if a user, for example in field email entered value which looks like email or if he filled all required fields :D
This is that moment when I slowed down. I must find how to make validation using React and Bootstrap.
At such moments the man, on the one hand, is angry that work is stopped but on the other hand he tries to repeat that as soon as he solved the problem it will later be used everywhere.
So much for today. I hope that in a few days validation will work.
Leave a Comment