react学习笔记----受控组件

1.最简单的受控组件（输入框的值改变，导致onChange事件发生，导致state里面的str被重新赋值，输入框的值受state控制，所以是受控组件）

import React, { Component } from 'react'
export default class Control extends Component {
    constructor(props){
        super(props);
        this.state ={
            str:''
        }
    }
    change=(e)=>{
        this.setState({
            str:e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" id="str" value={this.state.str} onChange={this.change} />//这只是一个输入框
                {this.state.str}
            </div>
        )
    }
}

2.上面只是一个输入框，如果输入框增多，那么只需要这样就好[e.target.id]这个id和输入框的id相同

import React, { Component } from 'react'
export default class Control extends Component {
    constructor(props){
        super(props);
        this.state ={
            str:''
        }
    }
    change=(e)=>{
        this.setState({
             [e.target.id]:e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" id="str" value={this.state.str} onChange={this.change} />
                {this.state.str}
                <input type="text" id="password" value={this.state.password} onChange={this.change} />
                {this.state.password}
            </div>
        )
    }
}

2.绑定更多的表单元素

import React, { Component } from 'react'
export default class Control extends Component {
    constructor(props){
        super(props);
        this.state ={
            str:'',
            password:"",
            city:"北京",
            sex:'male',
            vip:true
        }
    }
    change=(e)=>{
        this.setState({
            [e.target.id]:e.target.id==="vip"?e.target.checked:e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" id="str" value={this.state.str} onChange={this.change} />
                {this.state.str}
                <input type="text" id="password" value={this.state.password} onChange={this.change} />
                {this.state.password}
                <select id="city" value={this.state.city} onChange={this.change}>
                    <option>北京</option>
                    <option>上海</option>
                    <option>天津</option>
                </select>
                {this.state.city}
                <input type='radio' value="male" id="sex"
                 checked={this.state.sex==="male"?true:false} onChange={this.change} 
                 />男
                 <input type='radio' value="female" id="sex"
                 checked={this.state.sex==="female"?true:false}  onChange={this.change} 
                 />女
                 {this.state.sex}
                 <input type="checkbox" id="vip" checked={this.state.vip} 
                 onChange={this.change}  />
                {this.state.vip?"是":"不是"}vip 会员
            </div>
        )
    }
}