集成React-Semantic-UI和redux-form

Question

我正在使用redux-form(awesome libs)在React应用程序中处理我的表单和redux存储.一切运作良好,重要的形式和嵌套的json输出.

我正在尝试使用带有redux-form的React-Semantic-UI组件.我在文档中搜索了如何将自定义组件与redux格式集成,我们在这里: http: //redux-form.com/6.5.0/docs/faq/CustomComponent.md/似乎很完美.

但是当我整合Semantic和它时,它会起作用.

这是我用伪代码进行的简单测试:

const TestComponent = props => (
<Form>
     <Field name="dropdownTest" component={ TestSelect } />
</Form>
)

这里我的CustomComponent使用Dropdown.您可以在此处找到下拉文档和道具(onChange&value):

http://react.semantic-ui.com/modules/dropdown

import Form , Dropdown from 'semantic-ui-react'
import {myOption from './myOption'

const TestSelect = field = (
   <Form.Field>
            <label> Test dropdown </label>
             <Dropdown option={myOption} selection 
                                   value={{val : field.input.value}}
                                   onChange={ param => field.input.onChange(param.val)} />
     </Form.Field>
)

在文档中,我在自定义组件上添加了值&onChange道具.

我在这里显然有些遗漏.有人用redux-form和semantc ui有简单的例子吗？

谢谢你的帮助.

Answer 1

好的,我成功了:

要使用React Semantic Dropdown,这是一个简单的示例:

const TestComponent = props => (
<Form>
     <Field name="dropdownName" component={ DropdownFormField}
            label="Dropdown Test" 
      />

</Form>
)



const DropdownFormField = props => (
 <Form.Field>
   <Dropdown selection {...props.input}
             value={props.input.value}
             onChange={(param,data) => props.input.onChange(data.value)}
             placeholder={props.label} 
    />
  </Form.Field>
)

一切都很好.您可以使用Semantic和任何组件执行相同操作.

希望有人发现这个有用.