React Action Form

Recent projects have been developed using react, which is useful to react to manipulate the form. You then add ref to each form element and then manipulate the ref like the jquery manipulation Dom,

The code is as follows:

First I added ref to every form element.

And then manipulate the form like you do the DOM.

The whole process seems to be cumbersome, and it feels strange. You might as well use the Jqurey to manipulate the DOM directly.

Here, I'd like to add a little bit of ref in react.

refA property can be a callback function, not a name. This callback function executes immediately after the component is installed. The referenced component is passed as a parameter, and the callback function can immediately use the component, or save it for later use (or implement both behaviors).

Itrefrenderis as simple as assigning attributes to something returned.

Example of completion

var App = React.createClass({
    getInitialState: function() {
      return {userInput: ‘‘};
    },
    handleChange: function(e) {
      this.setState({userInput: e.target.value});
    },
    clearAndFocusInput: function() {
      // Clear the input
      this.setState({userInput: ‘‘}, function() {
        // This code executes after the component is re-rendered
        React.findDOMNode(this.refs.theInput).focus();   // Boom! Focused!
      });
    },
    render: function() {
      return (
        <div>
          <div onClick={this.clearAndFocusInput}>
            Click to Focus and Reset
          </div>
          <input
            ref="theInput"
            value={this.state.userInput}
            onChange={this.handleChange}
          />
        </div>
      );
    }
  });

In this example, the Render function returns<input/ >the description of the instance. But the real instance isthis.refs.theInputaccessed by. The appropriate instance is accessed as soon asref =“theInput”the containing subassembly is returned from renderthis.refs.theInput. This can even be implemented in higher-level (non-dom) components, such as<Typeahead ref = " myTypeahead " / >.

Summarize

When sending a message to a specific child instance, Refs is a good way to receive reactivepropsand the way it is through the flow of the receiverstatemay be inconvenient. However, for mobile data in your application, refs should not be your preferred abstract feature. By default, using reactive data streams for use cases and savingrefs is inherently reactive.

Benefits:

• You can define any public methods in the component class, such as the Reset method in Typeahead, and invoke these public methods through refs (such asthis.refs.myTypeahead.reset()).
• Performing a DOM measurement almost always requires contacting the "local" component, such as<input/ >, and byReact.findDOMNode(this.refs.myInput)accessing its underlying DOM node. Refs is one of the viable and reliable methods.
• Refs automatically book-kept! for you if a subassembly is destroyed, then its ref is destroyed. There's no need to worry about memory here (unless you've done something crazy to keep your reference).

Precautions:

• never access the Render method of a component inside of refs--or any component of the Render method while it is running in call Satck, and do not access refs.
• If you want to save the elasticity of Google Closure Compiler crushing, make sure that you never access the property that is specified as a string. This means that if your ref is defined asref =“myRefString”, you must use itthis.refs[‘myRefString‘]to access it.
• If you haven't programmed several applications with React, you'll usually start by trying to use refs to "make things happen" in your application. If so, take the time to think more carefully aboutstatewhere the component hierarchy should belong. In general, you will clearly find that the proper location for the "owning" state is in a higher hierarchy. Placing state there usually eliminates anything you wantrefto use to "make things happen"-instead, data flow often achieves your goals.

The above introduction reference: Http://wiki.jikexueyuan.com/project/react/more-about-refs.html

The view is not very understand. But to sum up, if I had to manipulate a large lost form like I did above, it would affect the execution of the data flow.

So I changed my code to the following:

First, in the initial state, set the value of the form

Then, the ref value of the form is removed, and the value is dynamically assigned to it.

After that, add the time to each form so that it updates the state of the form value corresponding to each change in the input box. Here are the events for each form

Finally, add these events to the form's onchange

With this modification, each time my input box changes, the state of the form's value is updated to achieve the effect of manipulating the form.

With Ajax, we just need to get the current state of each form. For example, I want to get the value of the price element, I just need the Var pricevalue=this.state.price.

Without having to manipulate a series of DOM. Because it's in the presentation, I'm not going to encapsulate the functions of each form. A common set looks good.

If there is a better way, look more advice!

React Action Form