react-form表单

最新推荐文章于 2024-08-25 07:00:00 发布

MiemieWan

最新推荐文章于 2024-08-25 07:00:00 发布

阅读量1.7k

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/miemiewan/article/details/79447437

版权

react 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

import React from "react";
// import "../css/style1.css";

class Form extends React.Component{
    constructor() {
        super();
        this.state = {
            text: '旺旺',
            select: "日本",
            textarea:"帮助大家思考的结局撒娇啊开始打算看电视"
        };

        //当函数中要用到this时，需要绑定this
        this.handleText = this.handleText.bind(this);
        this.handleSelect = this.handleSelect.bind(this);
        this.handleTextarea = this.handleTextarea.bind(this);
        this.submit = this.submit.bind(this);
    }
    handleText(e) {
        this.setState({
            text: e.target.value
        });
    }
    handleSelect(e) {
        this.setState({
            select: e.target.value
        });
    }
    handleTextarea(e) {
        this.setState({
            textarea: e.target.value
        });
    }
    submit(e) {
        console.log("提交");
        //取消默认行为
        e.preventDefault();
    }
    render() {
        return (
            <form onSubmit={this.submit}>
                <div>
                    <label>姓名：</label>
                    <input type="text" value={this.state.text} onChange={this.handleText} />
                </div>
                <div>
                    <label>性别：</label>
                    <input type="radio" name="gender" value="男" />男
                    <input type="radio" name="gender" value="女" defaultChecked />女
                    {/*使用checked会出错，应该用defaultChecked*/}
                </div>
                <div>
                    <label>喜好：</label>
                    <input type="checkbox" name="like" value="篮球" />篮球
                    <input type="checkbox" name="like"  value="足球" defaultChecked />足球
                    <input type="checkbox" name="like"  value="羽毛球" />羽毛球
                </div>
                <div>
                    <label>国籍：</label>
                    <select value={this.state.select} onChange={this.handleSelect}>
                    {/*通过设置select的value来设置默认选中值（根据option的value）*/}
                        <option value="中国">中国</option>
                        <option value="日本">日本</option>
                        <option value="美国">美国</option>
                    </select>
                </div>
                <div>
                    <label>备注：</label>
                    <textarea value={this.state.textarea} onChange={this.handleTextarea}></textarea>
                </div>
                <div>
                    <input type="submit" value="submit" />
                </div>
            </form>
        )
    }
}

export default Form;