Created
June 22, 2018 13:21
-
-
Save zushenyan/ab65322e37bb131cfd3283ae23c4f2d4 to your computer and use it in GitHub Desktop.
This file contains 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 { Field, reduxForm } from 'redux-form'; | |
import AutoSuggest from 'react-autosuggest'; | |
import styles from './styles.css'; | |
const suggestions = [ | |
{ label: 'Apple', value: 1 }, | |
{ label: 'Aqua', value: 2 }, | |
{ label: 'Banana', value: 3 }, | |
{ label: 'Bean', value: 4 }, | |
{ label: 'Date', value: 5 }, | |
]; | |
class Input extends React.PureComponent { | |
constructor (props) { | |
super(props); | |
this.state = { | |
filteredSuggestions: [], | |
}; | |
} | |
handleFetch = ({ value }) => { | |
const { suggestions } = this.props; | |
const filteredSuggestions = suggestions.filter( | |
({label}) => label.toLowerCase().startsWith(value) | |
); | |
this.setState({ filteredSuggestions }); | |
} | |
handleClear = () => { | |
this.setState({ filteredSuggestions: [] }); | |
} | |
handleGetSuggestion = (props) => { | |
return props.label; | |
} | |
handleSuggestionHighlighted = ({ suggestion }) => { | |
this.setState({ highlightedSuggestion: suggestion }); | |
} | |
renderSuggestion = (props) => { | |
return ( | |
<span>{props.label}</span> | |
); | |
} | |
handleSuggestionSelected = (event, { suggestionValue, method }) => { | |
const { input } = this.props; | |
input.onChange(suggestionValue); | |
if (method === 'enter') { | |
event.preventDefault(); | |
} | |
} | |
render () { | |
const { input } = this.props; | |
const { filteredSuggestions } = this.state; | |
return ( | |
<AutoSuggest | |
suggestions={filteredSuggestions} | |
onSuggestionsFetchRequested={this.handleFetch} | |
onSuggestionsClearRequested={this.handleClear} | |
getSuggestionValue={this.handleGetSuggestion} | |
renderSuggestion={this.renderSuggestion} | |
onSuggestionHighlighted={this.handleSuggestionHighlighted} | |
onSuggestionSelected={this.handleSuggestionSelected} | |
inputProps={input} | |
/> | |
); | |
} | |
} | |
const SimpleForm = props => { | |
const { handleSubmit, pristine, reset, submitting } = props; | |
return ( | |
<form onSubmit={handleSubmit}> | |
<div> | |
<label>First Name</label> | |
<div> | |
<Field | |
name="firstName" | |
component={Input} | |
suggestions={suggestions} | |
/> | |
</div> | |
</div> | |
{/* | |
<div> | |
<label>Last Name</label> | |
<div> | |
<Field | |
name="lastName" | |
component="input" | |
type="text" | |
placeholder="Last Name" | |
/> | |
</div> | |
</div> | |
<div> | |
<label>Email</label> | |
<div> | |
<Field | |
name="email" | |
component="input" | |
type="email" | |
placeholder="Email" | |
/> | |
</div> | |
</div> | |
<div> | |
<label>Sex</label> | |
<div> | |
<label> | |
<Field name="sex" component="input" type="radio" value="male" /> | |
{' '} | |
Male | |
</label> | |
<label> | |
<Field name="sex" component="input" type="radio" value="female" /> | |
{' '} | |
Female | |
</label> | |
</div> | |
</div> | |
<div> | |
<label>Favorite Color</label> | |
<div> | |
<Field name="favoriteColor" component="select"> | |
<option /> | |
<option value="ff0000">Red</option> | |
<option value="00ff00">Green</option> | |
<option value="0000ff">Blue</option> | |
</Field> | |
</div> | |
</div> | |
<div> | |
<label htmlFor="employed">Employed</label> | |
<div> | |
<Field | |
name="employed" | |
id="employed" | |
component="input" | |
type="checkbox" | |
/> | |
</div> | |
</div> | |
<div> | |
<label>Notes</label> | |
<div> | |
<Field name="notes" component="textarea" /> | |
</div> | |
</div> | |
*/} | |
<div> | |
<button type="submit" disabled={pristine || submitting}>Submit</button> | |
<button type="button" disabled={pristine || submitting} onClick={reset}> | |
Clear Values | |
</button> | |
</div> | |
</form> | |
); | |
}; | |
export default reduxForm({ | |
form: 'simple', // a unique identifier for this form | |
})(SimpleForm); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://codesandbox.io/s/3kq94jv211