- 35
- 0
antd-mobile表单的“基本”示例和“错误验证”示例,代码如下:https://mobile.ant.design/com...
1、“基本”示例
import { List, InputItem, WhiteSpace } from 'antd-mobile';
import { createForm } from 'rc-form';
class BasicInputExample extends React.Component {
componentDidMount() {
// this.autoFocusInst.focus();
}
handleClick = () => {
this.inputRef.focus();
}
render() {
const { getFieldProps } = this.props.form;
return (
<div>
<List renderHeader={() => 'Customize to focus'}>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="auto focus"
ref={el => this.autoFocusInst = el}
>标题</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="click the button below to focus"
ref={el => this.inputRef = el}
>标题</InputItem>
<List.Item>
<div
style={{ width: '100%', color: '#108ee9', textAlign: 'center' }}
onClick={this.handleClick}
>
click to focus
</div>
</List.Item>
</List>
<List renderHeader={() => 'Whether is controlled'}>
<InputItem
{...getFieldProps('control')}
placeholder="controled input"
>受控组件</InputItem>
<InputItem
defaultValue="Title"
placeholder="please input content"
data-seed="logId"
>非受控组件</InputItem>
</List>
<WhiteSpace />
<List renderHeader={() => 'Click label to focus input'}>
<InputItem
placeholder="click label to focus input"
ref={el => this.labelFocusInst = el}
><div onClick={() => this.labelFocusInst.focus()}>标题</div></InputItem>
</List>
<List renderHeader={() => 'Show clear'}>
<InputItem
{...getFieldProps('inputclear')}
clear
placeholder="displayed clear while typing"
>标题</InputItem>
</List>
<WhiteSpace />
<List renderHeader={() => 'Number of words for title'}>
<InputItem
{...getFieldProps('label8')}
placeholder="limited title length"
labelNumber={5}
>标题过长超过默认的5个字</InputItem>
</List>
<WhiteSpace />
<List renderHeader={() => 'Custom title(text / image / empty)'}>
<InputItem
{...getFieldProps('input3')}
placeholder="no label"
/>
<InputItem
{...getFieldProps('inputtitle2')}
placeholder="title can be icon,image or text"
>
<div style={{ backgroundImage: 'url(https://zos.alipayobjects.com/rmsportal/DfkJHaJGgMghpXdqNaKF.png)', backgroundSize: 'cover', height: '22px', width: '22px' }} />
</InputItem>
</List>
<WhiteSpace />
<List renderHeader={() => 'Customize the extra content in the right'}>
<InputItem
{...getFieldProps('preice')}
placeholder="0.00"
extra="¥"
>价格</InputItem>
</List>
<WhiteSpace />
<List renderHeader={() => 'Format'}>
<InputItem
{...getFieldProps('bankCard', {
initialValue: '8888 8888 8888 8888',
})}
type="bankCard"
>银行卡</InputItem>
<InputItem
{...getFieldProps('phone')}
type="phone"
placeholder="186 1234 1234"
>手机号码</InputItem>
<InputItem
{...getFieldProps('password')}
type="password"
placeholder="****"
>密码</InputItem>
<InputItem
{...getFieldProps('number')}
type="number"
placeholder="click to show number keyboard"
>数字键盘</InputItem>
<InputItem
{...getFieldProps('digit')}
type="digit"
placeholder="click to show native number keyboard"
>数字键盘</InputItem>
</List>
<WhiteSpace />
<List renderHeader={() => 'Not editable / Disabled'}>
<InputItem
value="not editable"
editable={false}
>姓名</InputItem>
<InputItem
value="style of disabled `InputItem`"
disabled
>姓名</InputItem>
</List>
</div>
);
}
}
const BasicInputExampleWrapper = createForm()(BasicInputExample);
ReactDOM.render(<BasicInputExampleWrapper />, mountNode);
2、“错误验证”示例
import { List, InputItem, Toast } from 'antd-mobile';
class ErrorInputExample extends React.Component {
state = {
hasError: false,
value: '',
}
onErrorClick = () => {
if (this.state.hasError) {
Toast.info('Please enter 11 digits');
}
}
onChange = (value) => {
if (value.replace(/\s/g, '').length < 11) {
this.setState({
hasError: true,
});
} else {
this.setState({
hasError: false,
});
}
this.setState({
value,
});
}
render() {
return (
<div>
<List renderHeader={() => 'Confirm when typing'}>
<InputItem
type="phone"
placeholder="input your phone"
error={this.state.hasError}
onErrorClick={this.onErrorClick}
onChange={this.onChange}
value={this.state.value}
>手机号码</InputItem>
</List>
</div>
);
}
}
ReactDOM.render(<ErrorInputExample />, mountNode);
问题:
1、“基本”示例使用了rc-form,“错误验证”示例没有使用rc-form,那么rc-form的使用场景是什么?
2、getFieldProps()怎么使用,代码中都是{...getFieldProps('control')}这样使用的,意思就是这个函数返回一个对象,那么这个对象里面究竟是什么内容?
0
打赏
收藏
点击回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
