zoukankan      html  css  js  c++  java
  • react 中文文档案例六 (表单)

    class Reservation extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                isGoing: true,
                numberOfGuests: 2,
                value: ''
            };
            this.handleInputChange = this.handleInputChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
            this.handleChange = this.handleChange.bind(this);
        }
        handleInputChange(event) {
            const target = event.target;
            const value = target.type === 'checkbox' ? target.checked : target.value;
            const name = target.name;
            this.setState({
                [name]: value
            });
        }
        handleChange(event) {
            this.setState({value: event.target.value});
        }
        handleSubmit(event) {
            alert('A name was submitted: ' + this.state.value);
            event.preventDefault();
        }
        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                <label>
                    Is going:
                    <input
                    name="isGoing"
                    type="checkbox"
                    checked={this.state.isGoing}
                    onChange={this.handleInputChange} />
                </label>
                <br />
                <label>
                    Number of guests:
                    <input
                    name="numberOfGuests"
                    type="number"
                    value={this.state.numberOfGuests}
                    onChange={this.handleInputChange} />
                </label>
                <br />
                <label>
                    Name : 
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                    <input type="submit" value="Submit" />
                </form>
            );
        }
    }
    ReactDOM.render(
        <Reservation />,
        document.getElementById('root')
    );
  • 相关阅读:
    github教程
    Django订单接入支付宝
    python去除html标签的几种方法
    vue-cli项目生成
    restful设计规范
    Vue的指令系统、计算属性和表单输入绑定
    Vue工具
    药物不良反应数据库信息的下载
    爬虫案例之Pubmed数据库下载
    数据分析案例之39药品网
  • 原文地址:https://www.cnblogs.com/Lolita-web/p/10351670.html
Copyright © 2011-2022 走看看