Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

What's the correct way to update <input/> default value? #699

Closed
DogLooksGood opened this issue Sep 10, 2015 · 5 comments

Comments

5 participants
@DogLooksGood
Copy link

commented Sep 10, 2015

I have a input tag:
<input type='text' />
when component did mount, I send ajax request and get a value.
Then I want to set this value as the input's defaultValue property.
Without redux, I might use local state, set this value to input's 'value' property and add an onChange function.
What's the correct way to do this in redux?

@morinted

This comment has been minimized.

Copy link

commented Sep 10, 2015

Your input will have local state, but you can connect it to redux on entry (component did mount, in your case) and on submit (or on change if you must act on the data immediately).

@DogLooksGood

This comment has been minimized.

Copy link
Author

commented Sep 11, 2015

Thanks for help.
Well, connecting a lot of input to redux means I have to maintain their state. It's really complex. All I want is just setting the input's value, then make it free to be changed by user.

@timdorr

This comment has been minimized.

Copy link
Member

commented Sep 11, 2015

You may want to use redux-form for this to make it more repeatable. You shouldn't have to set up actions for each input, just the whole form and its state.

Remember, the goal here is predictability and reliability. It may involve more steps to get the job done, but you'll end up with less gotchas and unexpected behavior. And on top of that, you can layer developer ergonomic tools like redux-devtools and webpack to enable hot reloading and time travel.

@timdorr timdorr added the question label Sep 11, 2015

@mikebarnhardt

This comment has been minimized.

Copy link

commented Sep 11, 2015

Sounds like you are wanting to use uncontrolled components. Check out the React Docs if you are unsure.

With uncontrolled components you can just use defaultValue={state.value} and a user can then change the value without having to set up state changes.

Although many recommend against uncontrolled components and using refs for reasons mentioned above by @timdorr .

@gaearon

This comment has been minimized.

Copy link
Contributor

commented Sep 12, 2015

Then I want to set this value as the input's defaultValue property.

That's not how defaultValue works. If you use defaultValue, that means “I only want to set it programmatically once, and then let user do whatever. If I ever want to update it again, I'll have to do it with DOM node tweaking.” This is called an uncontrolled input. It's good for simple forms that don't affect the rest of your app.

If you want to set values programmatically later in React's declarative manner, you'll have to make it a controlled input. In this case you'll have to provide always-up-to-date value as well as onChange that does something meaningful to change that value. Whether it calls setState or dispatches a Redux action is up to you. Redux Form is a nice project for making controlled forms easy with React and Redux, you might want to check it out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.