React and React Native by Adam Boduch

Author:Adam Boduch [Boduch, Adam]
Language: eng
Format: azw3, epub, pdf
Publisher: Packt Publishing
Published: 2017-03-08T05:00:00+00:00

Now let's look at the container component that controls the state of these inputs:

import React, { Component } from 'react'; import { fromJS } from 'immutable'; import InputsForm from './InputsForm'; // Validates the given "name". It should have a space, // and it should have more than 3 characters. There are // many scenarios not accounted for here, but are easy // to add. function validateName(name) { if (name.search(/ /) === -1) { return 'First and last name, separated with a space'; } else if (name.length < 4) { return 'Less than 4 characters? Srsly?'; } return null; } class InputsFormContainer extends Component { state = { data: fromJS({ // "Name" value and change handler. nameValue: '', // When the name changes, we use "validateName()" // to set "nameValidationState" and // "nameValidationText". nameChange: (e) => { this.data = this.data.merge({ nameValue: e.target.value, nameValidationState: validateName(e.target.value) === null ? 'success' : 'error', nameValidationText: validateName(e.target.value), }); }, // "Password" value and change handler. passwordValue: '', passwordChange: (e) => { this.data = this.data.set( 'passwordValue', e.target.value ); }, }), } // Getter for "Immutable.js" state data... get data() { return this.state.data; } // Setter for "Immutable.js" state data... set data(data) { this.setState({ data }); } render() { return ( <InputsForm {...this.data.toJS()} /> ); } } export default InputsFormContainer;

The event handlers for the inputs are part of the state and get passed to InputsForm as properties. Now let's take a look at some checkboxes and radio buttons. We'll use the <Radio> and the <Checkbox> react-bootstrap components:

import React, { PropTypes } from 'react'; import { Panel, Radio, Checkbox, FormGroup, } from 'react-bootstrap'; const RadioForm = (props) => ( <Panel header={(<h3>Radios & Checkboxes</h3>)}> { /* Renders a group of related radio buttons. Note that each radio needs to have the same "name" property, otherwise, the user will be able to select multiple radios in the same group. The "checked", "disabled", and "onChange" properties all come from the container component. */} <FormGroup> <Radio name="radio" onChange={props.checkboxEnabledChange} checked={props.checkboxEnabled} disabled={!props.radiosEnabled} > Checkbox enabled </Radio> <Radio name="radio" onChange={props.checkboxDisabledChange} checked={!props.checkboxEnabled} disabled={!props.radiosEnabled} > Checkbox disabled </Radio> </FormGroup> { /* Renders a checkbox and uses the same approach as the radios above: setting it's properties from state that's passed in from the container. */} <FormGroup> <Checkbox onChange={props.checkboxChange} checked={props.radiosEnabled} disabled={!props.checkboxEnabled} > Radios enabled </Checkbox> </FormGroup> </Panel> ); RadioForm.propTypes = { checkboxEnabled: PropTypes.bool.isRequired, radiosEnabled: PropTypes.bool.isRequired, checkboxEnabledChange: PropTypes.func.isRequired, checkboxDisabledChange: PropTypes.func.isRequired, checkboxChange: PropTypes.func.isRequired, }; export default RadioForm;

The idea is that the radio buttons toggle the enabled state of the checkbox and the checkbox toggles the enabled state of the radios. Note that, although the two <Radio> elements are in the same <FormGroup>, they need to have the same name property value. Otherwise, you'll be able to select both radios at the same time. Here's what this form looks like:

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.