ReactJS: best practice access input values when creating forms

Question

I've been playing a bit with ReactJS and am really enjoying the framework.

I'm also trying to follow the rule of creating components that are stateless where possible.

I have a Settings component that includes a child SettingsForm and a SettingsWidget.

Settings holds all the states, and only pass it as props to the form and widget.

This works (and scales) well because when the state in Settings is updated, it propagates to all child components.

var Settings = React.createClass({
    getInitialState: function() {
        settings: {}
    }
})

What I am not 100% sure on is the best practice when accessing input values on SettingsForm to pass it on to the parent component.

I know I can use refs and also two-way binding to accomplish this, but neither feel very "ReactJS-like".

Is there a better of way accomplishing this that I am unaware of? For the sake of completeness, I've included the relevant code in my SettingsForm component below

var SettingsForm = React.createClass({
  getInitialState: function() {
    return {
      changed: false
    }
  },
  handleChange: function(event) {    
    this.setState({changed: true})
    this.props.handleChange(
      this.refs.emailInputFieldRef.getDOMNode().value,
      this.refs.firstNameInputFieldRef.getDOMNode().value
    )    
  },
  handleSubmit: function(event) {
    event.preventDefault();
    // Access and pass on input values to parent callback so state is updated
    this.props.handleUpdate(
      this.refs.emailInputFieldRef.getDOMNode().value,
      this.refs.firstNameInputFieldRef.getDOMNode().value
    )
    this.setState(this.getInitialState());
  },
  ...
}

BradByte · Accepted Answer · 2015-08-21 21:01:21Z

1

For now there is a Mixin you can use to link the input values to the state, called LinkedStateMixin that is exactly what you are looking for...

var WithLink = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});

Then all you have to do is modify your handler functions on the parent component to take your inputs as variables, and pass that function down to the child component as a prop. When you want to handle the form, call that function in the props and send the state (bound with from the Mixin) as the variables.

React Docs - React Link

answered Aug 21, 2015 at 21:01

BradByte

11.1k2 gold badges41 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rog Over a year ago

Thanks Brad, exactly what I was looking for.

Collectives™ on Stack Overflow

ReactJS: best practice access input values when creating forms

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related