geist-ui: Input value can't be simply controlled by `value` prop
Bug report ๐
Not sure if this is a bug or a design decision. In the scanbox link, keep input in either input, you can see the 's value is controlled by the value state while the is not.
Version & Environment
- Version of browser chrome Version 83.0.4103.116 (Official Build) (64-bit)
- Version of
zeit-ui/reactcheck sandbox
Expection
Just want to know if this is intentional.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 15 (10 by maintainers)
Very good discussion about the controlled component. In fact, I agree with you on some points.
First of all, Iโd like to talk about why I provide (or design) internal state of the component: (Iโm not arguing for point, just stating why) In most component libraries or official examples of React, it is a common practice to synchronize state externally, keeping a similar practice is to hope that most users can get a similar experience when using it.
Secondly, the
Inputcomponent also provides some uncontrolled options:valueis not set, no external synchronization is required (you mentioned that too). This means that values can be obtained at any time butstatemaintenance is not required.Ref. Most of the time, users can skip synchronization and directly useRefAPI to get values.initialValueoptions. This is useful if you want to skip synchronization and set the initial value.Here Iโve created an example for
RefofInput.Of course, even if the user can control
Ref, the user cannot modify the internalstatein other ways. The only way to do this is to addvalueand then change thevalueprop.To be sure, now we have two problems that can be improved:
stateexternally.Valueof internal cannot be modified in an imperative API.About synchronization of
value:Now we have some solutions to reduce the burden of this problem:
useInput, you donโt need to synchronize manually at all.value. It may be useful in a few scenarios.value, and useinitialValueinstead. (it canโt cover all scenes.)value, and useRefto get value. (but thesetaction is invalid)After pull request merged, we will add the following ways:
value, and useRefto set value.About imperative API:
Thanks to your advice, I optimized the way
Inputcomponent works. Now when thevalueattribute is not set, theInputcomponent is uncontrolled, In other words, you can use external ways to update, such asRefor operate DOM API.And I added an example of the imperative API to the document page of
Input: #336