How to implement auto save on react form?

react
1

I’m building a form in React and I’d like to implement auto save on it. I’m not sure what the best way to approach the problem is. I’ve tried using an onchange event on the form and calling a meteor method, but that calls a meteor method every time a character is added or removed (very excessive). I’d like to only call the method when a user is done typing and has either pressed enter, or clicked out of the input box. However, I’m not sure how to listen for these events in React. There doesn’t appear to be any way to listen for on “unfocus” event. Any help would be appreciated!

2

Here is how we are currently achieving that in the React Todos example app: https://github.com/meteor/react-packages/blob/958222f5871ca431478f7fd90ae9f969ee76c755/examples/react-todos/client/components/TodoItem.jsx#L35

Also, as far as I know you should be able to listen to the onBlur event - it’s the opposite of onFocus. There’s also an event called onChanged, which might be helpful for your particular use case.

Here’s a list of all of the events React supports: https://facebook.github.io/react/docs/events.html#supported-events

1 Like
3

@sashko that’s perfect! Thanks for sharing the todos example. I wasn’t sure what onBlur was but it makes sense that it’d be the opposite.

4

For anyone not wanting to click a link. Using a debounce or throttle (YMMV) in the onChange event might be another approach, as mentioned in Saschkas example link. This is especially better if you have a textarea where the user spends a long time typing. A simple timeout can be used or a more sophisticated method like that found in lodash.

5

Sorry to re-surface this but I’m really struggling with reactivity getting in the way while attempting to implement autosave.

I have a large text field and I’m saving using a throttle function. The trouble is that when the save happens as the user is typing it takes a couple of hundred ms. During that time the user has typed a couple of characters. Because the text field is from a reactive source it then updates with the newly saved data and removes the characters entered while it was saving.

I don’t really need reactivity for this. Is there any simpler way to turn it off other than using the low-level publish APIs?

6

Duh. I needed to use debounce rather than throttle. This ensures that the save function is only called once the user has finished typing.

1 Like
7

I think the “real” solution is to make a local copy of the data for the form, rather than rendering the form directly from reactive minimongo queries. So when you render the form, just set initial state, and render from that.

1 Like
8

Has anyone had success with React forms and client side validations? I’m going to try to build a React form, with auto save, but the client side validation-required/not-required and UI-controls-show/hide rules I get with Blaze/Autoform/SimpleSchema are something I need to carry over. Anyone have examples of all these pieces put together correctly?

9

You’re welcome to take a look at an npm package that I threw together for my own personal use. https://github.com/ryanswapp/blue-form

You pass it a simple schema and it does validation. I use React component state to manage all the inputs/errors/etc… although I plan to move to redux in the future. I’d actually recommend using redux-form if you use redux. It works by passing a validation function to the form so you could easily use the simple schema validation features to make it work with meteor. Might be worth looking into!

1 Like