react表单练习

import React from 'react';
const genders = [
    { id: 0, text: "男", value: "male" },
    { id: 1, text: "女", value: "famale" }
]
const hobbies = [
    { id: 0, text: "html", value: "html" },
    { id: 1, text: "css", value: "css" },
    { id: 2, text: "javascript", value: "javascript" }
]
const cities = [
    { id: 0, text: "成都", value: "chengdu" },
    { id: 1, text: "重庆", value: "chongqing" },
    { id: 2, text: "北京", value: "beijing" }
]
export default class extends React.Component {
    state = {
        name: "zhangsan",
        gender: { id: 1, text: "女", value: "famale" },
        hobby: [
            { id: 1, text: "css", value: "css" },
            { id: 2, text: "javascript", value: "javascript" }
        ],
        city: { id: 2, text: "北京", value: "beijing" }
    }
    setHobby = (check, value) => {
        console.log(value);

        if (check) {
            this.setState({
                hobby: [...this.state.hobby,value]
            })
        }
        else {
            this.setState({
                hobby: this.state.hobby.filter(item =>item.id!==value.id)
                })
        }
    }
    render() {
        return (
            <div>
                <ul>
                    <li>name: {this.state.name}</li>
                    <li>gender: {this.state.gender.text}</li>
                    <li>hobby: {this.state.hobby.map(item => item.text).join(",")}</li>
                    <li>city: {this.state.city.text}</li>
                </ul>
                <h3>input type="text"</h3>
                姓名:<input type="text" value={this.state.name} onChange={(e) => {
                    this.setState({
                        name: e.target.value,
                    })

                }} />
                <h3>input type="radio"</h3>
                性别：{genders.map(item => (
                    <label key={item.id}>{item.text}
                        <input type="radio" checked={this.state.gender.id === item.id} name="gender" value={item.value} onChange={(e) => {
                            this.setState({
                                gender: { ...item },
                            })
                        }} />
                    </label>
                ))}
                <h3>input type="checkbox"</h3>
                兴趣：{hobbies.map(item => (
                    <label key={item.id}>{item.text}
                        <input type="checkbox" checked={this.state.hobby.some(v => {
                            if (v.id == item.id) {
                                return true;
                            }
                            return false;
                        })} name="hobbies" value={item.value} onChange={(e) => {
                            this.setHobby(e.target.checked, item);
                        }} />
                    </label>
                ))}
                <h3>select</h3>
                <select  value={this.state.city.id} onChange={(e)=>{
                        this.setState({
                            city:cities.filter(item=>item.id===~~e.target.value)[0]
                        })
                    }}>
                    {cities.map(item=><option value={item.id} key={item.id}>{item.text}</option>)}
                </select>
            </div>
        )
    }
}

import React from 'react';

const genders = [

    { id: 0, text: "男", value: "male" },

    { id: 1, text: "女", value: "famale" }

]

const hobbies = [

    { id: 0, text: "html", value: "html" },

    { id: 1, text: "css", value: "css" },

    { id: 2, text: "javascript", value: "javascript" }

]

const cities = [

    { id: 0, text: "成都", value: "chengdu" },

    { id: 1, text: "重庆", value: "chongqing" },

    { id: 2, text: "北京", value: "beijing" }

]

export default class extends React.Component {

    state = {

        name: "zhangsan",

        gender: { id: 1, text: "女", value: "famale" },

        hobby: [

            { id: 1, text: "css", value: "css" },

            { id: 2, text: "javascript", value: "javascript" }

        ],

        city: { id: 2, text: "北京", value: "beijing" }

    }

    setHobby = (check, value) => {

        console.log(value);

        if (check) {

            this.setState({

                hobby: [...this.state.hobby,value]

            })

        }

        else {

            this.setState({

                hobby: this.state.hobby.filter(item =>item.id!==value.id)

                })

        }

    }

    render() {

        return (

            <div>

                <ul>

                    <li>name: {this.state.name}</li>

                    <li>gender: {this.state.gender.text}</li>

                    <li>hobby: {this.state.hobby.map(item => item.text).join(",")}</li>

                    <li>city: {this.state.city.text}</li>

                </ul>

                <h3>input type="text"</h3>

                姓名:<input type="text" value={this.state.name} onChange={(e) => {

                    this.setState({

                        name: e.target.value,

                    })

                }} />

                <h3>input type="radio"</h3>

                性别：{genders.map(item => (

                    <label key={item.id}>{item.text}

                        <input type="radio" checked={this.state.gender.id === item.id} name="gender" value={item.value} onChange={(e) => {

                            this.setState({

                                gender: { ...item },

                            })

                        }} />

                    </label>

                ))}

                <h3>input type="checkbox"</h3>

                兴趣：{hobbies.map(item => (

                    <label key={item.id}>{item.text}

                        <input type="checkbox" checked={this.state.hobby.some(v => {

                            if (v.id == item.id) {

                                return true;

                            }

                            return false;

                        })} name="hobbies" value={item.value} onChange={(e) => {

                            this.setHobby(e.target.checked, item);

                        }} />

                    </label>

                ))}

                <h3>select</h3>

                <select  value={this.state.city.id} onChange={(e)=>{

                        this.setState({

                            city:cities.filter(item=>item.id===~~e.target.value)[0]

                        })

                    }}>

                    {cities.map(item=><option value={item.id} key={item.id}>{item.text}</option>)}

                </select>

            </div>

        )

    }

}