zoukankan      html  css  js  c++  java
  • 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
                    })
                }
     
  • 相关阅读:
    js Grid 列表插件
    Pagination 分页插件
    Textarea 富文本编辑器插件
    Accordion 手风琴 折叠菜单插件(2)
    AutoComplete 自动完成插件
    Draggable 拖放插件
    过渡特效插件
    Select下拉列表选择插件(包含下拉选择图片,下拉grid等)
    Sliding Panels 滑动门插件
    把图片转化为16进制信息的方式
  • 原文地址:https://www.cnblogs.com/zqxi/p/12108073.html
Copyright © 2011-2022 走看看