0.2.0 • Published 4 years ago
@wlxm/react-model v0.2.0
react-model
Preview
Install
npm i @wlxm/react-model -S
Usage
Basic
import React from "react";
import { useModel, TwoWayBingding, withModel } from "@wlxm/react-model";
function App() {
const [model, setModel] = useModel({ name: "小明" }); // default values
return (
<div>
<TwoWayBingding>
<label>姓名:</label>
<input _modelname="name" _byevent="true" />
</TwoWayBingding>
</div>
);
}
export default withModel(App);
use fine grit
TwoWayBinding.Item component only accepts one child.
import React from "react";
import { useModel, TwoWayBingding, withModel } from "@wlxm/react-model";
const { Item: TwoWayBingdingItem } = TwoWayBingding;
function App() {
const [model, setModel] = useModel({ name: "小明" });
return (
<div>
<label>姓名:</label>
<TowWayBindingItem rModel="name">
<input _byevent="true" />
</TowWayBindingItem>
<label>年龄:</label>
<TowWayBindingItem rModel="age">
<input _byevent="true" />
</TowWayBindingItem>
</div>
);
}
export default withModel(App);
use class component
import React from 'react';
import { useModel, TwoWayBingding, withModel, withClassModel } from '@wlxm/react-model';
const { Item: TowWayBindingItem } = TowWayBinding;
class ClassComponentDemo extends Component {
useEffect(() => {
this.props.setModel({
'msg': 'welcome'
})
}, []);
render() {
return (
<div>
<TowWayBinding>
<label>姓名:</label>
<input _modelname="name" _byevent="true" />
<label>年龄:</label>
<input _modelname="age" _byevent="true" />
</TowWayBinding>
<pre className="code-wrap">
<code className="code">{JSON.stringify(this.props.model, null, 2)}</code>
</pre>
</div>
);
}
}
export default withClassModel(ClassComponentDemo);
use validator
import React from "react";
import {
useModel,
TwoWayBingding,
withModel,
useModelValidator,
} from "@wlxm/react-model";
function App() {
const [model, setModel] = useModel({ name: "小明" });
const error = useModelValidator({
name: [(value) => !value && "name is required!"],
age: [
(value, setValue, model, setModel) =>
!/^[0-9]{1,3}$/.test(value) && setValue(parseInt(value) || 0),
],
});
return (
<div>
<TwoWayBingding>
<label>name:</label>
<div
data-error={error.name}
className={"error" + error.name ? "show-error" : ""}
>
<input _modelname="name" _byevent />
</div>
<label>age:</label>
<input _modelname="age" _byevent />
</TwoWayBingding>
<pre>
<code>{JSON.stringify(model, null, 2)}</code>
</pre>
<pre>
<code>{JSON.stringify(error, null, 2)}</code>
</pre>
</div>
);
}
export default withModel(App);