redux表单输入自定义组件未提交

时间:2017-09-07 13:39:42

标签: redux react-redux redux-form

我有一个自定义组件:

managed_accounts

我正在以Redux形式使用:

$('.title').addClass('animated swing')

从redux表单文档中,它表示应传递import React from 'react'; import styled from 'styled-components'; const InputText = ({ value, onChange, name }) => { return(<StyledInput value={value} onChange={() => onChange(value)}/>) } const StyledInput = styled.input.attrs({ type: 'text', name: props => props.name, value: props => props.value, placeholder: props => props.placeholder, width: props => props.width, onChange: props => props.onChange, })` padding: 10px; border: none; border-bottom: solid 1px #999; transition: border 0.3s; margin: 8px 5px 3px 8px; width: ${props => props.width || 275}px; `; export default InputText const CreateNewAssignmentForm = (props) => { const { handleSubmit, closeModal } = props return(<div> <Modal id="AssignmentModal"> <ModalBody width={600}> <form onSubmit={handleSubmit}> <TextRight> <CloseIconButton stroke={color.primary} onClick={() => closeModal()} /> </TextRight> <Box pad={{ left: 30 }}> <FormTitle> Add Assignment</FormTitle> </Box> <Box pad={{ left: 40, top: 10 }}> <StyledFormSubHeading>Essay Settings</StyledFormSubHeading> <Split> <StyledFormLabel>Essay Title</StyledFormLabel> <StyledFormLabel>Select Template</StyledFormLabel> </Split> <Split> <Field name="title" component={InputText} type="text" placeholder="Title" /> <button type="submit">Submit</button> </Split> </Box> </form> </ModalBody> </Modal> </div>) } 道具以使自定义组件起作用。但是当我尝试这个时,我收到value错误

如果省略onChange事件,则输入有效,但是当我提交表单时,返回的数据中不存在输入

2 个答案:

答案 0 :(得分:1)

因此,在仔细阅读文档后,道具应该是input.value和input.onChange,如下所示:

const InputText = ({ input: { value, onChange }, width, placeholder  }) =>
    {
        return(<StyledInput value={value} onChange={onChange} />)
    }

答案 1 :(得分:0)

与雪花杀手一样。

如果你想在组件上使用Field只触发props.onChange但没有触发器props.input.onChange,你可以扩展它:

import {TextArea} from 'react-weui';
import {Field, reduxForm} from 'redux-form';

class MyTextArea extends TextArea {
    handleChange(e) {
        super.handleChange(e);
        if (this.props.input && this.props.input.onChange)     this.props.input.onChange(e);
    }
}

...

<Field component={MyTextArea} name='xxx' placeholder="Enter lettering" rows="3" 
    maxLength={200}></Field>