html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app"/> <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>
子组件App.js
// 引入react import React from ‘react‘; // 声明class类 class App extends React.Component { //构造方法 constructor(){ super(); this.state = { inputValue:‘‘ } } //按钮点击事件 handleClick(){ //通过props属性获取父组件的getdata方法,并将this.state值传递过去 this.props.getdata(this.state.inputValue); } //输入框事件,用于为this.state赋值 handleChange(e){ this.setState({ inputValue: e.target.value }); } // 渲染 render(){ return ( <React.Fragment> {/* 设置组件事件的方法, 方法名为组件中调用的方法名, 设置绑定this指向调用者 */} <input onChange={this.handleChange.bind(this)}></input> <button onClick={this.handleClick.bind(this)}>点击获取数据</button> </React.Fragment> ); } } // 向外抛出 export default App;
子组件Son.js
// 引入react import React from ‘react‘; // 声明class类 class Son extends React.Component { //构造方法 constructor(){ super(); this.state = { } } // 渲染 render(){ return ( <React.Fragment> <div>获取父组件的数据:{this.props.mess}</div> </React.Fragment> ); } } // 向外抛出 export default Son;
父组件Person.js
// 引入react import React from ‘react‘; // 引入子组件 import App from ‘./App‘; import Son from ‘./Son‘; // 声明class类 class Person extends React.Component{ //构造方法 constructor(){ super(); this.state = { mess: ‘‘ //初始化mess属性 } } //用于接收子组件的传值方法,参数为子组件传递过来的值 getDatas(msg){ //把子组件传递过来的值赋给this.state中的属性 this.setState({ mess: msg }); } // 渲染 render(){ return ( <React.Fragment> {/* 渲染子组件,设置子组件访问的方法, getdata属性名为子组件中调用的父组件方法名 */} <App getdata={this.getDatas.bind(this)}></App> <div>展示数据:{this.state.mess}</div> <Son {...this.state}></Son> </React.Fragment> ); } } // 向外抛出 export default Person;
原文地址:https://www.cnblogs.com/yangjinggui/p/12069446.html
时间: 2024-10-10 13:18:25