zoukankan      html  css  js  c++  java
  • 父子组件传值(父组件传递子组件)

    父组件js

    import React, { Component } from 'react';
    import Son from './Son'
    import './Father.css'
    
    class Father extends Component {
        constructor(props) {
            super(props);
            this.state = {
                inputVal: '',
                tmp: ''
            }
        }
        
        render() {
    
            let value = 4131783;
            let {inputVal} = this.state;
    
            return (
                <div className="father">
                    <h1>我是父组件</h1>
                    <input type="text" value={inputVal} onChange={this.inputChangeAction}/>
                    <button onClick={this.sendAction}>发送</button>
    
                    <Son title="hello react" val={value} inputValue={this.state.tmp}/>
    
                </div>
            );
        }
    
        inputChangeAction = (ev)=>{
            this.setState({inputVal: ev.target.value});
        }
    
        sendAction = ()=>{
            //输入框的值  this.state.inputVal
            this.setState({tmp: this.state.inputVal});
    
        }
    }
    
    export default Father;

    父组件css

    .father{
        padding: 50px;
        background: lemonchiffon;
    }

    子组件js

    import React, { Component } from 'react';
    import './Son.css'
    
    class Son extends Component {
        // this.props.xxx   外部调用组件时,传入组件的属性,只能使用,不能修改。数据单向自顶向下传递的
        // this.state.xxx   内部的状态,内部状态可以使用也可以修改
        render() {
    
            console.log(this.props.title);
    
            return (
                <div className="son">
                    <h1>我是子组件</h1>
                    <p>接收到的title值为:{this.props.title}</p>
                    <p>接收到的val值为:{this.props.val}</p>
                    <p>接收到的inputValue值为:{this.props.inputValue}</p>
                </div>
            );
        }
    }
    
    export default Son;

    子组件css

    .son{
        padding: 30px;
        background: lightblue;
    }
  • 相关阅读:
    下巴肉和脖子肉怎么减肥
    java中compareTo和compare方法之比较,集合中对象的比较
    easyui中combotree只能选子选项,父级不被选中
    java线程总结(2/5)
    流行的框架与新技术
    Spring官网改版后下载
    prepareStatement与Statement的区别
    jQuery li click失效问题
    Flask 启动报错 error: [Errno 10053]
    [linux]CentOS 7 下安装 RabbitMQ
  • 原文地址:https://www.cnblogs.com/r-mp/p/11218053.html
Copyright © 2011-2022 走看看