受控组件 input 和 select

import React, { PureComponent } from 'react'

export default class App extends PureComponent {

    constructor(props){

        super(props)

        this.state = {

            username:"",

            password:"",

            valid:""

        }

    }

    render() {

        return (

            <div>

                <form onSubmit={e=> this.handleSubmit(e)}>

                    <div>

                        <label htmlFor="username">

                        用户名: <input type="text"

                        id="username"

                        name="username"

                        value = {this.state.username}

                        onChange = {e => this.handleChange(e)}

                            />

                        </label>

                    </div>

                    <div>

                        <label htmlFor="password">

                        密码: <input type="text"

                        id="password"

                        name="password"

                        value = {this.state.password}

                        onChange = {e => this.handleChange(e)}

                            />

                        </label>

                    </div>

                    <div>

                        <label htmlFor="valid">

                        验证码: <input type="text"

                        id="valid"

                        name="valid"

                        value = {this.state.valid}

                        onChange = {e => this.handleChange(e)}

                            />

                        </label>

                    </div>

                    <input type="submit" value="提交" />

                </form>

            </div>

        )

    }

    handleSubmit(e){

        e.preventDefault();

        let {username,password,valid} = this.state

        console.log(username,password,valid);

    }

    // 统一处理

    handleChange(e){

        // console.log(e.target.value); 

        this.setState({

            // username: e.target.value

            [e.target.name] :e.target.value

        })

    }

}

 

-------------------------------

import React, { PureComponent } from 'react'

export default class App extends PureComponent {

    constructor(props){

        super(props)

        this.state = {

            fruits:"orange"

        }

    }

    render() {

        return (

            <div>

                <form onSubmit={e=> this.handleSubmit(e)}>

                    <select name="fruits" 

                        onChange={e=>this.handleChange(e)}

                        value={this.state.fruits} > 

                        <option value="apple">苹果</option>

                        <option value="banana">香蕉</option>

                        <option value="orange">橘子</option>

                    </select>

                    

                    <input type="submit" value="提交" />

                </form>

            </div>

        )

    }

    handleSubmit(e){

        e.preventDefault();

        console.log(this.state.fruits);

    }

    handleChange(e){

        //  console.log(e.target.value);

        this.setState({

            fruits: e.target.value

        })

    }

}