React父子组件传值

其实react和vue传值是一样的，都是属性传值，最近技术栈都开始用react 了，第一个就是基于环信做一个即时通讯，到时候我也会上传代码进行分享

1. 第一步搭建最简单的react环境，搭建最简单的环境我也写过 地址在这里
2. 以下是基本的创建react 的代码

import React, { Component, Fragment } from 'react';
import './style.css'
import Todulist from './Todulist'
/*
* Todulist 就是子组件，
* Model  就属性传值的用法，然后就可以实现属性双向绑定
* /
import Model from './Model'

class App extends Component {
	constructor(props) {
		super(props)
		this.state = {
			inputvalue: '',
			list: []
		}
		// 一开始就进行绑定this 指向
		this.handinput = this.handinput.bind(this)
		this.handbtn = this.handbtn.bind(this)
		this.delectlist = this.delectlist.bind(this)
	}
	render() {
		return (
			<Fragment>
				<div>
					<label htmlFor="inserinput">点击我聚集光标</label>
					<input
						id="inserinput"
						className="input"
						value={this.state.inputvalue}
						onChange={this.handinput}
					/>
					<button onClick={this.handbtn}>按钮</button>
				</div>
				<ul>
					{
						this.gettoduitem()
					}
				</ul>
				<Model content={this.state.inputvalue}/>
			</Fragment>
		);
	}
	// 把jsx里面的代码单独导出来
	gettoduitem() {
		return (
			this.state.list.map((item, index) => {
				return (
					<Todulist
						key={index}
						content={item}
						id={index}
						delectitem={this.delectlist}
					/>
				)
			})
		)
	}
	handinput(e) {
		const value = e.target.value
		this.setState(() => ({
			inputvalue: value
		}))
	}
}
export default App;

1. 然后查看子组件传值

import React, { Component } from 'react'
import propTypes from 'prop-types'
/*
*propTypes 检查数据类型
*/
class Todulist extends Component {
    constructor(props) {
        super(props)
        this.delectlist = this.delectlist.bind(this)
    }
    render() {
        const {content,test}=this.props
        return (
            <div onClick={this.delectlist}>
              {test}-- {content}   
            </div>
        )
    }
    delectlist() {
        // 父组件向子组件传递属性值，子组件去触发父组件方法
        // 修改父组件的数据，还是只能父组件去删除，类似vue ement
        const {delectitem,index}=this.props
        delectitem(index)
        // this.props.delectitem(this.props.id)
    }  
}
// 检查数据传递类型   
// isRequired 必须传递，否则会报警告  
Todulist.propTypes={
    test:propTypes.string.isRequired,
    content:propTypes.string,
    delectitem:propTypes.func,
    index:propTypes.number,
}
// 设置属性默认值
Todulist.defaultProps={
    test:'666'
}
export default Todulist

• 父组件传递子组件 通过 组件属性挂载传值，比如content 代表传递过去属性接收值得名，item 代表父组件要传递的数据

       <Todulist
	    	key={index}
			content={item}
			id={index}
		    delectitem={this.delectlist}
     	/>

• 子组件不能直接修改父组件的值，遵从单项数据流思想，只能子组件通知父组件自己去进行增删改查

  class Todulist extends Component {
    constructor(props) {
        super(props)
        this.delectlist = this.delectlist.bind(this)
    }
    render() {
        const {content,test}=this.props
        
        return (
            <div onClick={this.delectlist}>
              {test}-- {content}   
              /*
              * 这里的content 其实就 this.props.content 父组件传递的那个名字
              * /
            </div>
        )
    }
    delectlist() {
       
      /*
      * 父组件向子组件传递属性值，子组件去触发父组件方法
      * 修改父组件的数据，还是只能父组件去删除，类似vue ement
      * 其实这个就是ul list 的标签，点击要进行删除，但是子组件不能直接修改咋办，所以
      * 父组件必须要把删除的方法传递给子组件，让子组件通知父组件，然后进行删除
      * /
        const {delectitem,index}=this.props
        delectitem(index)
    }  
}

• 如果要实现react 的双向绑定其实也简单

import React,{Component} from  'react';

// 实现简单的双向数据绑定
class Model extends Component{
    render(){
        return (
            <div>
                {this.props.content}
            </div>
        )
    }
}
export default Model;

• 你把这个 Model 组件放在父组件的下面，进行传递你要输入的值就进行简单的数据绑定了
  文笔不好，多多见谅，有问题可以咨询我微信