14、react之 組件的協同使用(組件的名字首字母必須大寫)






1、src下component下的main.js文件說明(即一個組件的說明)

require('normalize.css/normalize.css');
require('styles/App.css');

// es6的一個寫法
import React from 'react';
import SingupForm from './Synergy';
import Binding from './MIxin';
import UnControll from './Controll'
// node.js中引入文件的ES5的寫法
let yeomanImage = require('../images/yeoman.png');

// ES6的創建組建的方法

/*ES5的寫法
var AppComponent = React.createClass({
  getDefaultProps:function(){
    return {

    }
  },
  render:function(){
    return()
  }
})*/
class AppComponent extends React.Component {
  render() {
    return (
      <div className="index">
        <img src={yeomanImage} alt="Yeoman Generator" />
        <div className="notice">Please edit <code>src/components/Main.js</code> to get started!</div>
        <p>{this.props.text}</p>
        <SingupForm></SingupForm>
        <Binding></Binding>
        <UnControll></UnControll>
      </div>
    );
  }
}
// 設置組件的初始的狀態
AppComponent.defaultProps = {
  text:'demo'
};
// 輸出這個組件 以便在其他地方引用
export default AppComponent;

2、組件的協同使用

分開的寫法:

// 組件的協同使用
// 使用的是用一個組件包裹其他的組件
import React from 'react';

// 性別選擇文件
class GenderSelect  extends React.Component {
    render() {
        return (
            <select onChange={this.props.handleSelect}>
                <option value="0">男</option>
                <option value="1">女</option>
            </select>
        );
    }
}
// 輸出組件
class SingupForm extends React.Component {
    // 設置初始的狀態
    state = {
        name:'',
        password:'',
        gender:'0'
    }
    handleChange1(e){
        this.setState({
            name:e.target.value
        })
    }
    handleChange2(e){
        this.setState({
            password:e.target.value
        })
    }
    // 箭頭函數  函數名=()=>{return false} ,作用於的問題,{}中的this指向了調用函數的對象
    handleSelect=(e)=>{
        this.setState({
            gender:e.target.value
        })
    }
    render(){
        console.log(this.state)
        return (
            <form>
                <input type="text" placeholder="請輸入用戶名" onChange={this.handleChange1.bind(this)}/>
                <input type="password" placeholder="請輸入密碼" onChange={this.handleChange2.bind(this)}/>
                <GenderSelect handleSelect={this.handleSelect}/>
            </form>
        )
    }
}

export default SingupForm;

組合形式的寫法:

// 組件的協同使用
// 使用的是用一個組件包裹其他的組件
import React from 'react';

// 性別選擇文件
class GenderSelect  extends React.Component {
    render() {
        return (
            <select onChange={this.props.handleSelect}>
                <option value="0">男</option>
                <option value="1">女</option>
            </select>
        );
    }
}
// 輸出組件
class SingupForm extends React.Component {
    // 設置初始的狀態
    state = {
        name:'',
        password:'',
        gender:'0'
    }
    /*handleChange1(e){
        this.setState({
            name:e.target.value
        })
    }
    handleChange2(e){
        this.setState({
            password:e.target.value
        })
    }*/
    // e要放在最后一個
    handleChange(key,e){
        var newState = {};
        newState[key] = e.target.value;
        this.setState(newState)
    }
    // 箭頭函數  函數名=()=>{return false} ,作用於的問題,{}中的this指向了調用函數的對象
    handleSelect=(e)=>{
        this.setState({
            gender:e.target.value
        })
    }
    render(){
        console.log(this.state)
        return (
            <form>
                <input type="text" placeholder="請輸入用戶名" onChange={this.handleChange.bind(this,'name')}/>
                <input type="password" placeholder="請輸入密碼" onChange={this.handleChange.bind(this,'password')}/>
                <GenderSelect handleSelect={this.handleSelect}/>
            </form>
        )
    }
}

export default SingupForm;
然后到需要使用的地方引入使用,此處為在main.js中使用

其他說明:



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com