2017-01-24 22 views
5

3秒演示https://www.youtube.com/watch?v=bo2nNQXbhI8&feature=youtu.be所选择的选项将被恢复到未选择的状态

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

作为标题,所选择的选项将被恢复到未选择的状态 image

而且onChange方法具有用于无影响官方教程示例。

我的用例是,当用户从下拉列表中选择一个值。它应该解雇的行动来获取其他数据并呈现另一种形式的

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 
       } 
      } 
+0

Redux表格''要求您使用各种道具[如此处所述](http://redux-form.com/6.4.3/docs/api/Field.md/)。 – gustavohenke

+0

没有用,调度动作仍然不起作用onChange方法 – newBike

回答

1

我敲我的脑袋上一个类似的问题与反应本地选择器。尝试将'chooseTable'作为组件而不是无状态函数编写,并使用'this.state'和'this.setState'来引用选择的值。这里有一个例子从我选择器代码:

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> 
    ) 
    } 
} 

你能也可以使用元素的“的onChange”事件,它不绑定到终极版 - 形式“的onChange”道具?