2017-04-08

React.js開發入門教學(8)-傻人版表單

我們學到這邊應該可以利用所學到的東西完整地做出一張可以互動的表單了！其實在React.js有其他

做表單的方式，但是那個我們後來在學，我們還是先用自己會地做出一張土炮表單來測試看看吧:P

這中間我們用到之前所學到的取得輸入值與Checkbox的應用，再加上簡單的驗證來做出這張傻人版

的表單，程式碼如下

class Form_test extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            checkboxs: [
                {name: 'ck1', ck_id : 1, checked : false},
            ]
        };
    }
    chkChecked(ck_id, all) {
        var stateCopy = Object.assign({}, this.state);
        var i = 0;
        this.state.checkboxs.map(function (val){
            if(all) {
                stateCopy.checkboxs[i].checked = true;
            } else {
                if(val.ck_id == ck_id) {
                    stateCopy.checkboxs[i].checked = !val.checked;
                }
            }
            i++;
        });
    this.setState(stateCopy);
    }
    //這裡加上一個把輸入值存到state的方法
    set_ip1_val(Event) {
        this.setState({name: Event.target.value});
    }
    //這是我們拿來驗證表單內容的方法
    form_submit() {
        if(this.state.checkboxs[0].checked) {
            if(this.state.name != '') {
                //確認無誤後我們就可以把表單送出了！
                document.getElementById('test_form').submit();
            } else {
                alert('請輸入姓名');
            }
        } else {
            alert('請先同意後再送出');
        }
    }
    render() {
        var checkboxs_dom = this.state.checkboxs.map(function (chk, i){
            return (
                <div key={i}>
                    <input name={chk.name} id={chk.ck_id} type="checkbox" checked={chk.checked} onChange={this.chkChecked.bind(this, chk.ck_id, false)}/><label>同意</label>
                </div>
            );
        }.bind(this));
        return (
            <form id="test_form" action="php/test.php">
            <div>
                姓名：<input name="ip1" type="text" value={this.state.name} onChange={this.set_ip1_val.bind(this)}/>
                {checkboxs_dom}
            </div>
            <input type="button" value="送出" onClick={this.form_submit.bind(this)}/>
            </form>
        )
    }
};

ReactDOM.render(
    <Form_test />,
    document.getElementById('test')
);

當然也別忘了建立一張要處理傳過去的值的頁面唷！這邊我用的是php/test.php！

這樣就完成一張傻人表單啦（淚

React