Question

3秒演示https://www.youtube.com/watch?v=bo2nNQXbhI8&feature=youtu.be

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

作为标题，所选选项将恢复为未选中状态

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

Answer 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”事件而不将其绑定到redux-forms“onChange”prop？

所选选项将恢复为未选中状态

1 个答案: