react子传父

react子组件向父组件传值

不论是vue还是react都是单项数据流,所以说父组件将数据传到子组件中后,子组件不能直接修改父组件的值,那只能将值传到父组件中进行修改

上代码:

先定义父组件

class Parent extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    num: ''
                }
            }
            btn = (e) => {
                console.log(e.target.value) 这个e是js中自带的一个属性
                this.setState({
                    num: e.target.value
                })
            }
            render() {
                let { num } = this.state
                return (
                    <div>
                        <div>{num}</div>
                        <Child MyChild={this.btn} /> 子组件放到父组件中,运用自定义属性将btn的这个方法传给子组件
                    </div>
                )
            }
        }

　　定义子组件

class Child extends React.Component {

            ChildFn = (e) => {
                this.props.MyChild(e) 用this.props来接收来自父组件的方法,并且将e值传给父组件
            }

            render() {
                return (
                    <div>
                        <input type="text" onChange={(e) => this.ChildFn(e)} /> 这个e值,指的是这个文本框
                    </div>
                )
            }
        }

　　用的是html页面操作

ReactDOM.render(

            < div >
                <div>
                    <Pink />
                </div>
            </div >,
            document.getElementById('app') 将页面中id为app的元素获取出来
        )