sherlock-form
v1.0.1
Published
链尚网React-Native 组件库组件:Form
Downloads
12
Maintainers
Readme
sherlock-form
一、简介
链尚网React-Native 组件库组件:Form
用于组织表单数据,以及获取输入项表单的值
二、安装
npm install sherlock-form --save
或者使用我们的组件库:
npm install sherlock-mind --save
import Form from 'sherlock-form'
import {Form} from 'sherlock-mind';
三、用例
import Form from 'sherlock-form';
//或者
import {Form} from 'sherlock-mind'
import {TextInput} from 'react-native'
//零配置使用 使用内置的表单
<Form.TextInput></Form.TextInput>
<Form.Checkbox></Form.Checkbox>
//等等
//方案一:包裹一个第三方表单组件
const ITextInput = Form.Interface(TextInput);
//方案二:设定change与value方式包裹
// onChange 为Checkbox 组件输入改变时,用于Interface内部同步value使用
// checked 为设置checkbox组件值得属性名
const ICheckbox = Form.Interface(ICheckbox,'onChange','checked');
//方案三:复杂组件包裹
const IList = Form.Interface((props,formRef)=>{
return (<List {...props} onSelected={formRef.onNativeFormChange} value={formRef.value} ></List>);
})
//方案四:继承方式实现
class ProductNameList extends Form.ValueInterface{
constructor(props){
super(props);
this.state ={nameList:[]};
this.setSelected = this.setSelected.bind(this);
}
/**
* 重要:
用于判断是否为输入型组件,如果是输入型组件,则在表单组件onChange时 强制渲染
具体参见 ValueInterface
set value(){
...
if(this.isInputControl){
this.forceUpdate();
}
}
否则在onChange时不触发刷新
从而提高性能
*/
isInputControl = false
componentDidMount(){
this.remoteList().then((items)=>{
this.setState({nameList:items});
})
}
setSelected(item){
this.value = item;
}
remoteList(){
//this.contxt.form 由 <Form></Form>提供
var data = this.context.form.getValue();
return fetch('https://p.lianshang.com/product/name-list',{userName:data.userName});
}
render(){
return (<List data={this.state.nameList} getSelected={} selectedItem={this.value}></List>);
}
}
class Demo extends React.Component{
constructor(props){
super(props);
this.submit = this.submit.bind(this);
this.formRef = (instance)=>{
this.form = instance;
}
}
submit(){
var data = this.form.data;
/**
* data: {
userName:'xxxx',
password:'xxx',
agreement:true/false,
favorite:['足球','...'],
productName:'灯芯绒'
}
*/
}
render(){
//Form: onChange 当表单容器中任意表单发生改变时触发
//Interface: onChangeValue: 当当前表单值发生改变时触发
<Form ref={this.formRef} onChange={(v,item)=>...} >
<ITextInput name="userName" value="sss" />
<ITextInput name="password" secureTextEntry={true} value="sss" />
<ICheckbox name="agreement" checked={this.state.checked}>
<IList name="favorite" onChangeValue={(v)=>console.log(v) }>
<List.Item>足球</List.Item>
<List.Item>篮球</List.Item>
<List.Item>皮球</List.Item>
</IList>
<ProductNameList name="productName" />
<Button onPress={this.submit}>
</Form>
}
}
四、开源许可
基于 MIT License 开源,使用代码只需说明来源,或者引用 license.txt 即可。