React Form Summit

讓我們直接看看完整的程式碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>My Component</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <style type="text/css">
            .head-3 {font-size: 1.2em;font-weight: bold;}
        </style>
        <script type="text/babel">
            //設計組件類別
            class MyForm extends React.Component{
                constructor(props){
                    super(props);
                    this.state={
                        name:"",
                        gender:"male",
                        story:""
                        };
                }
                render(){
                    return  <form onSubmit={this.submitHandler.bind(this)}>
                                Name
                                <input type="text" value={this.state.name}
                                       onChange={this.changeTextHandler.bind(this)}/>
                                <br/>
                                Gender
                                <select value={this.state.gender}
                                        onChange={this.changeSelectHandler.bind(this)}>
                                    <option value="male">男</option>
                                    <option value="female">女</option>
                                </select>
                                <br/>
                                Story 
                                <textarea value={this.state.story}
                                          onChange={this.changeTextareaHandler.bind(this)}/>
                                <br/>
                                <input type="submit" value="Submit"/>
                            </form>;
                }
                changeTextareaHandler(e){
                    this.setState({story: e.currentTarget.value});
                }
                changeSelectHandler(e){
                    this.setState({gender: e.currentTarget.value});
                }
                changeTextHandler(e){
                    this.setState({name: e.currentTarget.value});
                }
                submitHandler(e){
                    e.preventDefault(); //取消原來submit預設的reload
                    console.log("Name: " + this.state.name);
                    console.log("Gender: " + this.state.gender);
                    console.log("Story: " + this.state.story);
                }
            }
            window.addEventListener("load", ()=>{
                ReactDOM.render(<MyForm/>, document.body);
            })
        </script>
    </head>
</html>

重點部分如下

    render(){
        return  <form onSubmit={this.submitHandler.bind(this)}>
                    Name
                    <input type="text" value={this.state.name}
                            onChange={this.changeTextHandler.bind(this)}/>
                    <br/>
                    Gender
                    <select value={this.state.gender}
                            onChange={this.changeSelectHandler.bind(this)}>
                        <option value="male">男</option>
                        <option value="female">女</option>
                    </select>
                    <br/>
                    Story 
                    <textarea value={this.state.story}
                                onChange={this.changeTextareaHandler.bind(this)}/>
                    <br/>
                    <input type="submit" value="Submit"/>
                </form>;
    }
    changeTextareaHandler(e){
        this.setState({story: e.currentTarget.value});
    }
    changeSelectHandler(e){
        this.setState({gender: e.currentTarget.value});
    }
    changeTextHandler(e){
        this.setState({name: e.currentTarget.value});
    }
    submitHandler(e){
        e.preventDefault(); //取消原來submit預設的reload
        console.log("Name: " + this.state.name);
        console.log("Gender: " + this.state.gender);
        console.log("Story: " + this.state.story);
    }


這部分要注意的部分如下：

  • 使用了 onChange 事件，並且運用 setState 將目前屬性改變，讓畫面改變。

  • 使用 onSubmit 事件，使用 e.preventDefault() 取消原來 submit 事件原生的 reload ，並將目前屬性印出來。


Refernece