思路:先定义一个state里的一个状态,因为如果状态改变都会重新执行render,所以在render写上判断动态的赋值,也可以使用三目运算。
import React from 'react';
import './App.css';
import Persion from './Persion/Persion';
class App extends React.Component {
/**
* state: 用于改变组件内状态的值(动态)
* props: 用于组件通信传值
*/
state = {
persions: [
{
name: '渣渣辉',
count: '30'
},
{
name: 'aaa',
count: '20'
},
{
name: 'bbb',
count: '10'
},
{
name: 'ccc',
count: '5'
}
],
otherState: 'anything',
showPersion:false
}
// 函数直接定义在于render同级别,因为class类下,用this.函数名来访问
switchNameHandLer = ( newName ) => {
console.log("hello")
// es6中this执行为当前类
//this.state.persions[0].name = '渣渣渣渣辉' //不要直接去更改state Use setState()
this.setState({
persions: [
{
name: newName,
count: '3000'
},
{
name: 'aaa',
count: '20'
},
{
name: 'bbb',
count: '10'
},
{
name: 'ccc',
count: '5'
}
]
})
}
nameChangedHandLer = (event) => {
console.log(event.target)
this.setState({
persions: [
{
name: event.target.value,
count: '3000'
},
{
name: 'aaa',
count: '20'
},
{
name: 'bbb',
count: '10'
},
{
name: 'ccc',
count: '5'
}
]
})
}
togglePersonHandle = () =>{
this.setState({
showPersion: !this.state.showPersion
})
}
render () {
const style = {
backgroundColor: 'red',
border: '1px solid blue'
}
let persions = null;
if (this.state.showPersion) {
persions = (<div>
<Persion
name={this.state.persions[0].name}
count={this.state.persions[0].count}
changed={this.nameChangedHandLer}
/>
<Persion
name={this.state.persions[1].name}
myclick={this.switchNameHandLer.bind(this, '渣渣辉2')}
count={this.state.persions[1].count} />
<Persion name={this.state.persions[2].name}
count={this.state.persions[2].count} />
<Persion name={this.state.persions[3].name}
count={this.state.persions[3].count}>
<a href='http://www.baidu.com'>非常感谢大家的支持</a>
</Persion>
</div>)
}
return (
<div className="App">
hello world
{/* 函数不能加括号,加括号就直接执行了,使用箭头函数可以实现参数的传递 */}
{/* <button onClick={() => this.switchNameHandLer('古天乐')}>更改状态值</button> */}
{/* 第二种方式 bind 传递 (建议) */}
{/* <button style={style} onClick={this.switchNameHandLer.bind(this, '古天乐')}>更改状态值</button> */}
<button style={style} onClick={this.togglePersonHandle}>内容切换</button>
{persions}
{/* { this.state.showPersion ?
<div>
<Persion
name={this.state.persions[0].name}
count={this.state.persions[0].count}
changed={this.nameChangedHandLer}
/>
<Persion
name={this.state.persions[1].name}
myclick={this.switchNameHandLer.bind(this, '渣渣辉2')}
count={this.state.persions[1].count} />
<Persion name={this.state.persions[2].name}
count={this.state.persions[2].count} />
<Persion name={this.state.persions[3].name}
count={this.state.persions[3].count}>
<a href='http://www.baidu.com'>非常感谢大家的支持</a>
</Persion>
</div> : null
} */}
</div>
);
}
}
export default App;