react js学习手记：子组件与父组件

创建子组件GenderSelect
子组件作用是一个性别选择器，父组件会给子组件传一个函数，父组件会获取子组件修改的值

import React, { Component } from 'react';

class GenderSelect extends Component {

    render(){
        return <select onChange={this.props.handleSelect}>
            <option value="0">男</option>
            <option value="1">女</option>
        </select>
    }

}

export default GenderSelect;

父组件MyFrom

import React, { Component } from 'react';
import GenderSelect from './GenderSelect';

class MyFrom extends Component {

    constructor(props) {
        super(props);
        this.state = {name: '',password: '',gender: ''};
        this.handleSelect = this.handleSelect.bind(this)
    }

    handleChange(name,event){
        var newState = {}
        newState[name] = event.target.value
        this.setState(newState)
    }

    handleSelect(event){
        this.setState({gender: event.target.value})
    }

    render(){
        console.log(this.state)
        // handleChange.bind(this) 给函数加上默认参数，bind 可以接受多个参数，
        // 第一个参数是函数里的this值，可以替换为其他对象，那么函数里的this就是那个对象。
        //
        return <from>
            <input type="text" placeholder="请输入用户名" onChange={this.handleChange.bind(this,'name')}/>
            <input type="text" placeholder="请输入密码" onChange={this.handleChange.bind(this,'password')}/>
            <GenderSelect handleSelect={this.handleSelect} ></GenderSelect>
        </from>
    }

}

export default MyFrom;