How to handle early input into isomorphically rendered forms

Question

I have a React application that includes a form that is displayed on the server side, pre-populated by user work. The problem is that if the user edits the value in the form before the application loads, the application is not aware of this change. When the user saves, the unchanged data that was displayed by the server is re-saved, and the new user data is deleted, although it is still displayed on the form. In short, there seems to be a gap between the React values ​​and the input in the markup, which it replaces on initial load.

I believe that I could put links to each input and copy their values ​​to the application state on the DidMount component, but there should be a better way. Has anyone else solved this problem?

Update

Now I believe that the best way to solve this problem would be for React to take input values ​​into account when creating checksums. GH problem: https://github.com/facebook/react/issues/4293

Answer 1

I believe that I could put links to each input and copy their values ​​to the application state on the DidMount component, but there should be a better way. Has anyone else solved this problem?

Browser autocomplete fields or remembering previous values ​​when updating can also lead to what is actually the same problem - presenting your application about data other than user-defined.

In the past, my brute force solution was to extract the full form state from my onSubmit inputs and rerun validaton before allowing submission.

Using componentDidMount , because you offer sounds as a more elegant solution, since it avoids user input of invalid data and is allowed to try to send it before any warnings are received. However, you do not need to add ref to each input; just add it to the <form> and use the .elements collection to pull out all the data.

Proposed Solution:

• In componentDidMount() pull form data from .elements (I extracted get-form-data from my form library for this purpose)
• Check each current field value for what is in your application state.
• If the current value of the field is different, consider it the same way as a new user input coming through an event - update it in the state and run all the associated verification procedures.

Then, starting with componentDidMount() , your application and user will always be on the same page (literally).

Answer 2

If I understand you correctly, this is what happens: https://jsfiddle.net/9bnpL8db/1/

 var Form = React.createClass({ render: function () { return <div> <input type="text" defaultValue={this.props.defaultValue}/> </div>; } }); // Initial form render without server-side data React.render(<Form/>, $('#container')[0]); setTimeout(function () { // Simulate server-side render $('#container').html( // overwrites input React.renderToString(<Form defaultValue="server1"/>) ); }, 5000); 

You cannot use server-side rendering to create updates. Rather, server-side rendering should be used to create the start page, filling in the inputs before the user can ever make changes. To solve your problem, I think you have several options:

• Use server-side rendering to render the start page, prefilling the input with saved data. With this option, the user never sees a page without saved data. This fixes the problem when the user starts typing input, and then the server overwrites that input.
• Use client-side visualization to render the page and use the GET request to retrieve pre-populated data, update input, if the user has not yet entered any input.