face
Write less code, do more things!
Sync 可在 React 这类单向数据流的框架中达到双向绑定的效果，
但实际上还是单向数据流。
这是一个可以提高开发效率的双向绑定语法糖。
<input {...self.form.item("user")} />
<input {...self.form.password("user")} />
import React , { Component } from "react"
import FormLogic from "face-form"
class Input extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
user: 'nimo'
}
}
self.form = new FormLogic({
getValue: function () {
return self.state.form
},
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
render() {
const self = this
return (
<div>
<input {...self.form.item('user')} />
<input {...self.form.password('user')} />
<br />
<code>
{self.form.get('user')}
</code>
</div>
)
}
}
export default Input
<select {...self.form.item("user")}>
import React , { Component } from "react"
import FormLogic from "face-form"
class Select extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
user: 'nimo'
}
}
self.form = new FormLogic({
getValue: function () {
return self.state.form
},
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
render() {
const self = this
return (
<div>
<select {...self.form.item('user')}>
<option value="tim" >tim</option>
<option value="nimo" >nimo</option>
<option value="nico" >nico</option>
</select>
<br />
<code>
{self.form.get('user')}
</code>
</div>
)
}
}
export default Select
<input {...self.form.checkbox("user", { value: "nimo" })} />
import React , { Component } from "react"
import FormLogic from "face-form"
class Checkbox extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
user: []
}
}
self.form = new FormLogic({
getValue: function () {
return self.state.form
},
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
render() {
const self = this
return (
<div>
<label>
<input
{...self.form.checkbox('user', {
value: 'tim'
})}
/> tim
</label>
<label>
<input
{...self.form.checkbox('user', {
value: 'nimo'
})}
/> nimo
</label>
<label>
<input
{...self.form.checkbox('user', {
value: 'nico'
})}
/> nico
</label>
<br />
<code>
{JSON.stringify(self.form.get('user'))}
</code>
</div>
)
}
}
export default Checkbox
<input {...self.form.radio("user", { value: "nimo" })} />
import React , { Component } from "react"
import FormLogic from "face-form"
class Radio extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
user: ''
}
}
self.form = new FormLogic({
getValue: function () {
return self.state.form
},
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
render() {
const self = this
return (
<div>
<label>
<input
{...self.form.radio('user', {
value: 'tim'
})}
/> tim
</label>
<label>
<input
{...self.form.radio('user', {
value: 'nimo'
})}
/> nimo
</label>
<label>
<input
{...self.form.radio('user', {
value: 'nico'
})}
/> nico
</label>
<br />
<code>
{JSON.stringify(self.form.get('user'))}
</code>
</div>
)
}
}
export default Radio
<input {...self.form.radio("user", { value: "nimo" })} />
import React , { Component } from "react"
import FormLogic from "face-form"
class Textarea extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
user: 'nimo'
}
}
self.form = new FormLogic({
getValue: function () {
return self.state.form
},
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
render() {
const self = this
return (
<div>
<textarea {...self.form.textarea('user')} />
<br />
<code>
{self.form.get('user')}
</code>
</div>
)
}
}
export default Textarea
transform: inputprops outputchange
import React , { Component } from "react"
import FormLogic from "face-form"
class Count extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
}
}
render() {
const self = this
return (
<button className="countButton"
onClick={function () {
self.props.onMount(
self.props.count + 1
)
}} >
{self.props.count}
</button>
)
}
}
class CountDemo extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
user: 1
}
}
self.form = new FormLogic({
getValue: function () {
return self.state.form
},
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
render() {
const self = this
return (
<div>
{/*
<Count
count={1}
onMount={function(count){...}}
/>
*/}
<Count
{
...self.form.item('user', {
props: 'count',
change: 'onMount'
})
}
/>
</div>
)
}
}
export default CountDemo
import React , { Component } from "react"
import FormLogic from "face-form"
class Range extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
}
}
render() {
const self = this
return (
<div>
<select
className="rangeStart"
value={self.props.start}
onChange={function (e) {
self.props.onChange(
e.target.value,
self.props.end
)
}}
>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select
className="rangeEnd"
value={self.props.end}
onChange={function (e) {
self.props.onChange(
self.props.start,
e.target.value
)
}}
>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
)
}
}
class Props extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
range: [1, 4]
}
}
self.form = new FormLogic({
getValue: function () {
return self.state.form
},
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
render() {
const self = this
return (
<div>
{/*
<Range
start={'2'}
end={'5'}
onChange={function (start, end) {
console.log(start, end)
}}
/>
*/}
<Range
{...self.form.item('range', {
props: function (value) {
return {
start: value[0],
end: value[1]
}
},
sync: function (start, end) {
return [start, end]
}
})}
/>
<br />
<code>
{JSON.stringify(self.form.get('range'))}
</code>
</div>
)
}
}
export default Props
import React , { Component } from "react"
import FormLogic from "face-form"
class Input extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
user: 'nimo',
age: 12,
lists:[
{
id:111,
name:'grifree'
},{
id:222,
name:'haha'
}
]
}
}
self.form = new FormLogic({
getValue: function () {
return self.state.form
},
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
render() {
const self = this
return (
<div>
<table>
<tbody>
<tr>
<td>
this.state =
<pre>
{JSON.stringify(self.state.form, null, 4)}
</pre>
</td>
<td>
user: <input {...self.form.item('user')} /><br/>
age: <input {...self.form.item('age')} /><br/>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<pre className="code"
onClick={function () {
self.form.set(
'user',
Math.random().toFixed(2)
)
}}
>
set('user', Math.random().toFixed(2) )
</pre>
<pre className="code"
onClick={function() {
self.form.set('lists[0].name',Math.random())
}}
>
set('lists[0].name', Math.random())
</pre>
<pre className="code"
onClick={function() {
self.form.set('lists[{id:222}].name',Math.random())
}}
>
{`set('lists[{id:222}].name',Math.random())`}
</pre>
<pre className="code"
onClick={function () {
self.form.set({
user: Math.random().toFixed(2),
age: Math.random().toFixed(2)
})
}}
>
{`set({
user: Math.random().toFixed(2),
age: Math.random().toFixed(2)
})`}
</pre>
<pre className="code"
onClick={function () {
self.form.set(
'lists[0]',
{
id: Math.random(),
name: Math.random()
}
)
}}
>
{`set('lists[0]',{
id: Math.random(),
name: Math.random()
})`}
</pre>
</td>
<td>
<pre className="code"
onClick={function (e) {
alert(JSON.stringify(self.form.getValue()))
}}
>
getValue
</pre>
<pre className="code"
onClick={function (e) {
alert(JSON.stringify(self.form.get('user')))
}}
>
get('user')
</pre>
<pre className="code"
onClick={function (e) {
alert(JSON.stringify(self.form.get('lists[0].name')))
}}
>
get('lists[0].name')
</pre>
<pre className="code"
onClick={function (e) {
alert(JSON.stringify(self.form.get('lists[{id:222}].name')))
}}
>
{`get('lists[{id:222}].name')`}
</pre>
<pre className="code"
onClick={function (e) {
alert(JSON.stringify(self.form.get('lists[0]')))
}}
>
get('lists[0]')
</pre>
</td>
</tr>
</tbody>
</table>
</div>
)
}
}
export default Input