ReactJS调用父方法

JavaScript

YOC31066084

2020-03-11

我正在React React中迈出第一步，并试图理解父母与孩子之间的交流。我正在制作表格，所以我有用于样式字段的组件。而且我还有包含字段并对其进行检查的父组件。例：

var LoginField = React.createClass({
    render: function() {
        return (
            <MyField icon="user_icon" placeholder="Nickname" />
        );
    },
    check: function () {
        console.log ("aakmslkanslkc");
    }
})

var MyField = React.createClass({
    render: function() {
...
    },
    handleChange: function(event) {
//call parent!
    }
})

有没有办法做到这一点。我的逻辑在reactjs“ world”上好吗？谢谢你的时间。

第784篇《ReactJS调用父方法》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
逆天TomHarry 2020.03.11

使用功能|| 无状态组件

父组件

 import React from "react";
 import ChildComponent from "./childComponent";

 export default function Parent(){

 const handleParentFun = () =>{
   console.log("Call to Parent Component!");
 }
 return (<>
           This is Parent Component
           <ChildComponent 
             handleParentFun={handleChildFun}
           />
        </>);
}

子组件

import React from "react";


export default function ChildComponent(props){
  return(
         <> This is Child Component 
          <button onClick={props.handleParentFun}>
            Call to Parent Component Function
          </button>
         </>
        );
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android