这是App.js文件的内容:
import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
state = {
persons:
[
{ name: "Mrs CoCo", count: 21 },
{ name: "Mrs Maomao", count: 31 }
],
otherState: "anything"
}
changeName = (event) =>{
this.setState(
{
persons:
[
{ name: event.target.value, count: 23 },
{ name: "Mrs Maomao", count: 31 }
]
}
);
}
render() {
return (
<div className="App">
<Person changed={this.changeName} name={this.state.persons[0].name} count={this.state.persons[0].count} >我很高兴!!!</Person>
</div>
);
}
}
export default App;
这是创建的Person.js文件,在页面上有个输入框,当用户在输入框中输入值,将会触发changed方法,App.js中的changed事件,调用changeName方法,event事件对象可以得到input标签中的内容。
import React from 'react';
// const是定义常量
const Person = (elem) => { // 形参接收,是一个对象
// return <p>大家好,我是{elem.name},我的作品有{elem.count}部</p>;
return (
<div>
<p onClick={elem.myClick}>大家好,我是{elem.name},我已经有{elem.count}部作品!</p>
<p>{elem.children}</p>
<input type="text" onChange={elem.changed} defaultValue={elem.name}></input>
</div>
);
}
export default Person;
在执行页面上的输入框输入姓名,P标签的内容,就会同时将用户输入的值,取出放在P标签中。