Created
September 14, 2017 17:11
-
-
Save whichsteveyp/61c742bb7c767668841672527333a944 to your computer and use it in GitHub Desktop.
Prop Getters?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import Downshift from 'downshift'; | |
class Foo extends React.Component { | |
render() { | |
return <Downshift onChange={this.onChange}> | |
{(controls) => { | |
const {isOpen, inputValue, selectedItem, ...funcs} = controls; | |
return <div> | |
<label {...funcs.getLabelProps()}>Type things</label> | |
<input {...funcs.getInputProps()} /> | |
</div> | |
}} | |
</Downshift> | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import Downshift from 'downshift'; | |
class Foo extends React.Component { | |
render() { | |
return <Downshift onChange={this.onChange}> | |
{(controls) => { | |
const {isOpen, inputValue, selectedItem, labelProps, inputProps,...funcs} = controls; | |
return <div> | |
<label {...labelProps, anOverride: true}>Type things</label> | |
<input {...inputProps} /> | |
</div> | |
}} | |
</Downshift> | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Yes, with your example:
That just broke downshift... Because you overwrote
inputProps.onChange
.So instead you would have to compose them together yourself so you run both your
onChange
handler and downshift's, and watch out for updates that removeonChange
internally so you're not calling it...With downshift, you do this instead:
And downshift will compose it together for you 😄