LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
JS
/**
 * Field
 */

class Field extends React.Component {
  
  constructor (props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    const value = props.initialValue || '';
    this.state = { value };
  }
  
  componentWillReceiveProps (nextProps) {
    this.setState({ value: nextProps.initialValue });
  }

  onChange (event) {
    this.setState({ value: event.target.value });
    this.props.onChange && this.props.onChange(event);
  }

  render () {
    return (
      
    );
  }
}

Field.propTypes = {
  initialValue: React.PropTypes.string,
  onChange: React.PropTypes.func,
};

/** 
 * Form 
 */
 
class Form extends React.Component {

  constructor (props) {
    super(props);
    this.onChangeSyncedInput = this.onChangeSyncedInput.bind(this);
    this.onChangeNonSyncedInput = this.onChangeNonSyncedInput.bind(this);
    this.state = {
      syncedValue: 'Synced',
      nonSyncedValue: 'Non-Synced',
    };
  }
 
  onChangeSyncedInput (event) {
    this.setState({ syncedValue: event.target.value });
  }
 
  onChangeNonSyncedInput (event) {
    this.setState({ nonSyncedValue: event.target.value });
  }

  render () {
    return (
      
); } } const root = document.getElementById('root'); ReactDOM.render(
, root);

Description

Three inputs in a form. The value of the first two are synced. The value of the third is independent. The form's state is aware of both values.
Term
Sat, 04/14/2018 - 20:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv