Welink React-ui表单组件Form(文本域)
Form(文本域)
填写类表单-文本域。Form UI 提供与WeLink规范一致的表单视图。
参数说明
InputItem
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string | 规定 input 元素的类型 | |
disabled | bool | false | 是否禁用 |
placeholder | string | 可描述输入字段预期值的提示信息 | |
value | string | 可配和onChange事件,通过设置状态改变显示值 | |
onChange | func | 文本值改变时触发 |
import React from 'react';
import {
CellBody, TextArea, Tags,
Form, FormCell, FormHeader,
FormItem, InputItem
} from '@wecode/react-weui';
const _marginTop = { marginTop: 30 };
export default class FormWrite extends React.Component {
state={
value: '',
text1: '',
text2: ''
}
handleChangeValue = (key, value) => {
this.setState({ [key]: value });
}
render() {
const { value, text1, text2 } = this.state;
return (
<section>
<Form form>
<FormItem>
<InputItem type="text" placeholder="请输入" value={value} onChange={text=>this.handleChangeValue('value', text)} />
</FormItem>
</Form>
<Form style={_marginTop} form>
<FormItem>
<FormHeader label>标题</FormHeader>
<FormCell>
<CellBody>
<TextArea placeholder="Enter your comments" rows="3" showCounter maxLength={300} />
</CellBody>
</FormCell>
</FormItem>
</Form>
<Form style={_marginTop} form>
<FormItem>
<FormCell>
<CellBody>
<TextArea placeholder="Enter your comments" rows="3" showCounter maxLength={300} />
</CellBody>
</FormCell>
</FormItem>
</Form>
<Form style={_marginTop} form>
<FormItem>
<FormHeader label>标题</FormHeader>
<Tags
tags={['常用', '常用', '常用三', '常用四字', '常用五个字']}
onChange={(e, text)=>{
const value = text1 + text;
if (value.length <= 300) {
this.handleChangeValue('text1', value);
}
}}
/>
<FormCell>
<CellBody>
<TextArea
placeholder="Enter your comments"
rows="3"
showCounter
maxLength={300}
value={text1}
onChange={(e)=>{
const text = e.target.value;
if (text.length <= 300) {
this.handleChangeValue('text1', text);
}
}}
/>
</CellBody>
</FormCell>
</FormItem>
</Form>
<Form style={_marginTop} form>
<FormItem>
<Tags
tags={['常用', '常用', '常用三', '常用四字', '常用五个字']}
onChange={(e, text)=>{
const value = text2 + text;
if (value.length <= 300) {
this.handleChangeValue('text2', value);
}
}}
/>
<FormCell>
<CellBody>
<TextArea
placeholder="Enter your comments"
rows="3"
showCounter
maxLength={300}
value={text2}
onChange={(e)=>{
const text = e.target.value;
if (text.length <= 300) {
this.handleChangeValue('text2', text);
}
}}
/>
</CellBody>
</FormCell>
</FormItem>
</Form>
</section>
);
}
}
- 点赞
- 收藏
- 关注作者
评论(0)