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

import React, { Component } from 'react';

class GenderSelect extends Component {

    render(){
        return 
    }

}

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 
    }

}

export default MyFrom;

ITPub博客

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

最新文章