• react 子传父


    //父组件
            class Parent extends React.Component{
                constructor(){
                    super()
                    this.state = {
                        num : ""
                    }
                }
                changeNum=(e)=>{
                    this.setState({
                        num: e.target.value
                    })
                }
                render(porps){
                    return (
                        <div>
                   {/*展示的数据*/}
                            {this.state.num}
                          {/*子组件的事件名称changeInp*/}
                            <Childen changeInp={this.changeNum}></Childen>
                        </div>
                    )
                }

            }
            
            ReactDOM.render(
                <Parent></Parent>,
                document.getElementById("root")
            );
    
    
    //子组件
            class Childen extends React.Component {
                render(porps) {
                    return (
                        <div>
                            {/*直接利用props触发事件*/} <input onInput={this.props.changeInp} /> </div> ) } }
    //子   性能比前者要高
            class Childen extends React.Component{
                changeInpp = (e) => {
              //这里需从子组件获取event对象 并作为形参传过去
    this.props.changName(e.target.value) } render(){ return( <p> <input type="text" onInput={this.changeInpp}/> </p> ) } }
    //父类只需要接收数据并赋值就可以了
           changeInp = (val) =>{
                    this.setState({
                        name: val
                    })
                }
     
  • 相关阅读:
    三种renderman规范引擎的dice对比
    球形环境映射之angular与latlong格式互换
    SharePoint中的ASHX
    如何查看SharePoint未知错误的详细信息
    在SQL Server 2008设置发送邮件步骤详解
    项目管理软件对比
    海外云服务器VPS
    国内和国外域名注册商介绍
    快速将一个表的数据生成SQL插入语句
    使用sql server 链接服务器
  • 原文地址:https://www.cnblogs.com/zqxi/p/12108073.html
Copyright © 2020-2023  润新知