之前的文章我们介绍了 React 表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容。接下来我们将介绍 React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法。
之前我们已经根据 create-react-app 模块创建了一个 React 项目，并定义 App.js 为根组件，即父组件，Home.js 为子组件。我们看一下两个组件的代码：
App.js
1 import React, {Component} from 'react'; 2 import Home from './components/Home'; 3 4 class App extends Component { 5 constructor(props) { 6 super(props); 7 this.state = { 8 title: "I am father" 9 } 10 } 11 12 fatherFunction = () => { 13 console.log("I am fatherFunction") 14 } 15 16 fatherSelf = () => { 17 console.log("I am fatherSelf") 18 } 19 20 getChildData = (name) => { 21 console.log(name) 22 } 23 24 render() { 25 return ( 26 <div className="App"> 27 <Home 28 title={this.state.title} 29 fatherFunction={this.fatherFunction} 30 father={this} 31 /> 32 </div> 33 ); 34 } 35 } 36 37 export default App;