无法配合antd中的createForm使用
Closed this issue · 17 comments
pashangshangpo commented
import React from 'react'
import { Switch, InputItem, TextareaItem } from 'antd-mobile'
import { createForm } from 'rc-form'
import Header from '@/components/Header'
import CsrComponent from '@/components/CsrComponent'
import './index.less'
class Page extends React.Component {
render() {
console.log(this.props.form) // undefined
const { getFieldProps } = this.props.form
return (
<CsrComponent>
<div className="address-page">
<Header
title={ this.props.isEdit ? '编辑地址' : '新增地址' }
/>
<div className="div" />
<div className="main">
<div className="switch-box">
<p className="name">设置为默认地址</p>
<Switch
className="switch"
{...getFieldProps('switch', {
valuePropName: 'checked',
})}
/>
</div>
<div className="list">
<ul>
<li>
<InputItem
className="input"
placeholder="收货人姓名"
></InputItem>
</li>
<li>
<InputItem
className="input"
placeholder="收货人名"
></InputItem>
</li>
<li>
<TextareaItem
className="textarea"
placeholder="收货地址1"
autoHeight
/>
</li>
<li>
<TextareaItem
className="textarea"
placeholder="收货地址2"
autoHeight
/>
</li>
<li>
<InputItem
className="input"
placeholder="国家"
></InputItem>
</li>
<li>
<InputItem
className="input"
placeholder="省"
></InputItem>
</li>
<li>
<InputItem
className="input"
placeholder="城市"
></InputItem>
</li>
<li>
<InputItem
type="number"
className="input"
placeholder="手机号码"
></InputItem>
</li>
<li>
<InputItem
type="number"
className="input"
placeholder="邮编"
></InputItem>
</li>
<li>
<InputItem
className="input"
placeholder="邮箱"
></InputItem>
</li>
</ul>
</div>
</div>
<div className="btn">保存</div>
</div>
</CsrComponent>
)
}
}
Page.getInitialProps = async ctx => {
return {
isEdit: true,
form: {
consigneeName1: '张三',
consigneeName2: '李思',
address1: '杭州市西湖区上杭11号',
address2: '杭州市西湖区上杭11号',
countries: '**',
province: '杭州',
city: '杭州',
phone: 18750821113,
zipCode: 11000,
email: '111@qq.com'
}
}
}
export default createForm()(Page)
使用getInitialProps后,组件无法接收到createForm高阶组件传递的form参数
zhangyuang commented
@pashangshangpo 并不会拿不到form。。。你这压根就没写super(props)
先去看看react class component怎么拿props吧
pashangshangpo commented
记得如果没有写constructor,是不一定要执行super()的
zhangyuang commented
...你不执行super你的props从哪来呢。建议去看看super props到底干了什么
发自我的iPhone
…------------------ 原始邮件 ------------------
发件人: 爬上山坡 <notifications@github.com>
发送时间: 2020年6月30日 17:54
收件人: ykfe/egg-react-ssr <egg-react-ssr@noreply.github.com>
抄送: yuuang <569105585@qq.com>, Comment <comment@noreply.github.com>
主题: 回复:[ykfe/egg-react-ssr] 无法配合antd中的createForm使用 (#173)
pashangshangpo commented
class 组件,没有写constructor,不是也可以传递props
pashangshangpo commented
没有使用getInitialProps是可以拿到form参数的,而且也没有手动执行constructor,被getInitialProps这个影响了吧
pashangshangpo commented
改成class组件的方式试试,不要使用函数式的
zhangyuang commented
并不会影响。跟class还是fc也没有关系。即使按你的例子跑我这边也是正常的,你return的数据字段不要叫form。。明显重名了
zhangyuang commented
zhangyuang commented
提供一个复现仓库地址
pashangshangpo commented
还真重名了😓,不过不写getInitialProps还真可以用,好奇葩。我再试验一下,谢谢作者帮忙找了个bug
zhangyuang commented
提供一个复现仓库,即使是重名应该也能看到被覆盖后的属性的
发自我的iPhone
…------------------ 原始邮件 ------------------
发件人: 爬上山坡 <notifications@github.com>
发送时间: 2020年6月30日 18:11
收件人: ykfe/egg-react-ssr <egg-react-ssr@noreply.github.com>
抄送: yuuang <569105585@qq.com>, Comment <comment@noreply.github.com>
主题: 回复:[ykfe/egg-react-ssr] 无法配合antd中的createForm使用 (#173)
还真重名了😓,不过不写getInitialProps还真可以用,好奇葩。我再试验一下,谢谢作者帮忙找了个bug
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.
pashangshangpo commented
真实项目,无法描述
zhangyuang commented
尝试从demo复现的过程中基本就能找到问题。
发自我的iPhone
…------------------ 原始邮件 ------------------
发件人: 爬上山坡 <notifications@github.com>
发送时间: 2020年6月30日 18:13
收件人: ykfe/egg-react-ssr <egg-react-ssr@noreply.github.com>
抄送: yuuang <569105585@qq.com>, Comment <comment@noreply.github.com>
主题: 回复:[ykfe/egg-react-ssr] 无法配合antd中的createForm使用 (#173)
真实项目,无法描述
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.
pashangshangpo commented
zhangyuang commented
不清楚你的具体需求如果是要根据当前设备宽度来动态计算的话放在客户端渲染或者用state进行二次渲染皆可
发自我的iPhone
…------------------ 原始邮件 ------------------
发件人: 爬上山坡 <notifications@github.com>
发送时间: 2020年6月30日 18:20
收件人: ykfe/egg-react-ssr <egg-react-ssr@noreply.github.com>
抄送: yuuang <569105585@qq.com>, Comment <comment@noreply.github.com>
主题: 回复:[ykfe/egg-react-ssr] 无法配合antd中的createForm使用 (#173)
pashangshangpo commented
window.addEventListener('load', function() {
document.body.hidden = false
});
突然想起来,之前写了一个这个,不知道有没有影响
pashangshangpo commented
这个先关闭了,我再试试