x-form

by b1ncer

HTML

<script src="https://unpkg.com/[email protected]/umd/x-form.min.js"></script>

Babel + JSX

//简单，非侵入的 React form 双绑方案
const {XForm, XGet, decorator} = window['x-form']

const XInput = decorator('input', {getter: e => e.target.value})

const Item = ({message}) => 
	<div>{message}</div>

class SimpleForm extends React.Component {
	
    state={
    	form: {}
    }
    
    onChange(name, value, formMap) {
    	this.setState({
        	form: {
            	...formMap,
                [name]: value
            }
        })
    }
    
    render() {
    	return (
        	<div>
        	    <XForm formMap={this.state.form} onChange={this.onChange.bind(this)}>
        	        <form>
                        
        	            <XInput _bind="username"/>
                        <XGet _select={['username']}>
                            {
                            	username => {
                                	let message = 'tip: 千万不要输入: greedy is good 999999'
                                	if (username == 'greedy is good 999999') {
                                    	message = '获得金钱： 999999'
                                    }
                                    return <Item message={message} />
                                }
                            }
                        </XGet>
                        <XInput _bind="password" type="password"/>
                        <XGet _select={['username', 'password']}>
                            {
                            	(username, password) => {
                                	let message = 'tip: 密码不要小于 8 位，除非你叫库日天'
                                    if (password && password.length >= 8) {
                                    	message = '😁 看到了' + password
                                    } else if (username == '库日天') {
                                    	message = '吃个🐔吧'
                                    }
                                    return <Item message={message}/>
                                }
                            }
                        </XGet>
        	       ...