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;
// 引入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={(e) =>{
this.handleChange(e)
}}></input>
<button onClick={() => {
this.handleClick()
}}>点击获取数据</button>
</React.Fragment>
);
}
}
// 向外抛出
export default App;
import React, { Component, Fragment }from 'react';
class App extends Component {
constructor(props){
super(props);
this.state = {
inputValue: '',// 用来存储 input框中的 value值。
}
}
handleChange = (e) => {
// const value = e.target.value;
const value = this.input.value;
this.setState(() => ({inputValue: value}))//新版的react中的setState()函数可以接收一个函数，箭头函数的函数体使用（）包裹可以省略return
}
handleClick = () => {
this.setState((prevState) => { // 同时setState函数还提供一个prevState参数，这个参数代表未改变之前的this.state
this.props.getdata(prevState.inputValue);
return {
inputValue: '' // 添加完毕以后清空input框
}
})
}
render(){
return (
<Fragment>
<div>
<input
onChange = { this.handleChange }
value = {this.state.inputValue}
ref = {(input) => {this.input = input}}
/>
<button onClick = { this.handleClick }>提交</button>
</div>
</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;
// 引入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={(e)=>{
this.getDatas(e)
}}></App>
<div>展示数据：{this.state.mess}</div>
<Son {...this.state}></Son>
</React.Fragment>
);
}
}
// 向外抛出
export default Person;
浙公网安备 33010602011771号