首页 文章

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

提问于
浏览 次
0

我有一个自定义组件：

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

我正在以Redux形式使用：

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

从redux表单文档中，它表示应传递 value 和 onChange 道具以使自定义组件起作用 . 但是当我尝试这个时，我得到一个 TypeError: _onChange is not a function 错误

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

redux react-redux redux-form

2 回答

  • 0

    所以在仔细阅读文档之后，道具应该是input.value和input.onChange，如下所示：

    const InputText = ({ input: { value, onChange }, width, placeholder  }) =>
    {
        return(<StyledInput value={value} onChange={onChange} />)
    }
    回复于
  • 1

    和雪花杀手一样 .

    如果你想在组件上使用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>
    回复于

相关问题