javascript - 无法将受控组件值传递给 redux-form
问题描述
我创建了一个出生日期组件,它应该有单独的日期、月份和年份字段。该组件将组合这些值并提供 YYYY-MM-DD 格式的日期字符串。
Date of birth
组件代码
import * as React from 'react';
import * as _ from 'lodash';
import { Col, Input } from 'antd';
const InputGroup = Input.Group;
class DateOfBirthInput extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
value:{}
};
console.log(props);
}
public handleChange = (event: any) => {
const date:any = _.get(this.state,"value");
if(event.target.id === 'day'){
date.day = event.target.value;
}
if(event.target.id === 'month'){
date.month = event.target.value;
}
if(event.target.id === 'year'){
date.year = event.target.value;
}
this.setState({
value: date
});
}
public render() {
return (
<div>
<div className="ant-form-item-label"><label title="Date of birth">Date of birth</label></div>
<InputGroup>
<Col span={4}>
<Input
placeholder="MM"
id="month"
type="text"
onChange={this.handleChange} />
</Col>
<Col span={1}/>
<Col span={4}>
<Input
placeholder="DD"
id="day"
type="text"
onChange={this.handleChange} />
</Col>
<Col span={1}/>
<Col span={5}>
<Input
placeholder="YYYY"
id="year"
type="text"
onChange={this.handleChange} />
</Col>
<Col>
<h4>Date of birth output: {JSON.stringify(this.state.value)}</h4>
</Col>
</InputGroup>
</div>
);
}
}
export default DateOfBirthInput;
父组件
...
<InputGroup>
<Col span={24}>
<Field
label="Date of Birth"
name="userInfo.dateOfBirth"
placeholder="Date of Birth"
component={DateOfBirthInput}
/>
</Col>
</InputGroup>
...
如何将值从子组件的状态传递给父组件?
根据文档,我需要通过value
和onChange
事件,它应该可以工作。
https://redux-form.com/6.0.0-alpha.5/docs/faq/customcomponent.md/
我想我在父组件中遗漏了一些东西。请帮忙。
解决方案
让组件工作。这是解决方案
import * as React from 'react';
import * as _ from 'lodash';
import { Col, Input } from 'antd';
const InputGroup = Input.Group;
class DateOfBirthInput extends React.Component<any, any> {
public value:any = 'abc';
constructor(props: any) {
super(props);
this.state = {
value:{}
};
this.value = "DateSr";
console.log(props);
}
public handleChange = (event: any) => {
const date:any = _.get(this.state,"value");
if(event.target.id === 'day'){
date.day = event.target.value;
}
if(event.target.id === 'month'){
date.month = event.target.value;
}
if(event.target.id === 'year'){
date.year = event.target.value;
}
this.setState({
value: date
});
const DateString:string = date.year+ '-' + date.month + '-' + date.day;
this.props.input.onChange(DateString);
}
public render() {
return (
<div>
<div className="ant-form-item-label"><label title="Date of birth">Date of birth</label></div>
<InputGroup>
<Col span={4}>
<Input
placeholder="MM"
name="legalInfo.dateOfBirth"
id="month"
type="text"
onChange={this.handleChange} />
</Col>
<Col span={1}/>
<Col span={4}>
<Input
placeholder="DD"
name="legalInfo.dateOfBirth"
id="day"
type="text"
onChange={this.handleChange} />
</Col>
<Col span={1}/>
<Col span={5}>
<Input
placeholder="YYYY"
name="legalInfo.dateOfBirth"
id="year"
type="text"
onChange={this.handleChange} />
</Col>
<Col>
<h4>Date of birth output: {JSON.stringify(this.state.value)}</h4>
</Col>
</InputGroup>
</div>
);
}
}
export default DateOfBirthInput;
希望能帮助到你
推荐阅读
- python - 读取带有网络和子网掩码的 csv 并写入带有 ping 结果的文件
- javascript - Binance Futures API:签名无效
- sql - 将数字格式化为两位小数 - Oracle
- python - google colab 上的不同精度
- wordpress - 标题元素上的引荐来源网址/重定向网址
- react-native - React Native - 根据设备旋转移动的组件
- java - 如何计算时间差
- c - 如何理解指针的存储类型
- python - 有人可以帮助为 Python 3.7 编译 GTK/PyGObject All-in-one 吗?
- android - 如何将数据从函数传递到有状态?