我有一个自定义组件:
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事件,则输入有效,但是当我提交表单时,返回的数据中不存在输入
答案 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>