The selected option will be restored to the unselected state.

Question

3sec Demo https://www.youtube.com/watch?v=bo2nNQXbhI8&feature=youtu.be

https://gist.github.com/weichenghsu/407a8862f3382a425fb531b3dedcd6f5

As the name, the selected option will be restored to the unselected state.

And the onChange method onChange not affect the official case study.

My use case is when the user selects a value from the drop-down list. It must trigger an action to retrieve other data and display in a different form.

  const chooseTable = ({items, meta:{touched, error}}) => ( <select onChange={event => { console.log(this.props.fields); this.props.tableNameOnChange(event.target.value); }}> <option value="">Select</option> { items.map((item :any, i: integer) => <option key={item.id} value={item.id}>{item.name}</option> ) } </select> ) <Field component={chooseTable} items={schemaData.tableList} name="tableName" > {/*<option value="#ff0000">Red</option>*/} {/*<option value="#00ff00">Green</option>*/} {/*<option value="#0000ff">Blue</option>*/} </Field> UIBuilderForm = reduxForm({ form: 'dashbaordUiBuilderForm', fields: ['tableName'] } }) (UIBuilderForm as any); // Decorate with connect to read form values const selector = formValueSelector('dashbaordUiBuilderForm') // export default connect(mapStateToProps, mapDispatchToProps)(UIBuilderForm); export default connect(state => { const TableSchemaName = selector(state, 'TableSchemaName') return { TableSchemaName } } 

Answer 1

I hit my head on a similar problem with a reaction-based collector. Try writing your "selectTable" as a component instead of a stateless function, and use "this.state" and "this.setState" to indicate which value is selected. Here is an example from my collector code:

 class ExpirePicker extends React.Component { constructor(props) { super(props) this.state = { selected: 'ASAP' } } render() { const { input: { onChange, ...rest }} = this.props return ( <Picker style={style.input} selectedValue={this.state.selected} onValueChange={(value) => { this.setState({selected: value}) onChange(value) }} {...rest}> {Object.keys(ExpireTypes).map(renderItem)} </Picker> ) } } 

Could you also use the "onChange" element and not bind it to the "onChange" prop reduction forms?