版权声明:未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/88775992
需求:
点击Button按钮让内容在显示与隐藏中切换
import React, { Component } from 'react';
import './App.css';
import Footer from './components/layout/Footer';
class App extends Component {
state={
persons:[
{
name:"周家大小姐"
}
],
showPreson:false,
};
// 显示隐藏
click =()=>{
const doesShow = this.state.showPreson;
this.setState({//点击的时候取反
showPreson:!doesShow
})
}
render() {
return (
<div className="App">
<button onClick={this.click}>显示与隐藏</button>
{
this.state.showPreson ?
<Footer name={this.state.persons[0].name} v-if="showPreson"/> : null
}
</div>
);
}
}
export default App;
以上方式写入之后你会发现结构有点乱,其实可以在优化一下:
import React, { Component } from 'react';
import './App.css';
import Footer from './components/layout/Footer';
class App extends Component {
state = {
persons: [
{
name: "周家大小姐"
}
],
showPreson: false,
};
nameChangedHandler = (event) => {//event可以得到Input中的内容
console.log(event.target.value)//修改state中的数据实现双向绑定
this.setState({
persons: [
{
name: event.target.value
}
]
})
};
// 显示隐藏
click = () => {
const doesShow = this.state.showPreson;
this.setState({
showPreson: !doesShow
})
}
render() {
//定义一个空值,在else的时候使用
let persons = null;
if (this.state.showPreson) {
persons = (
<Footer name={this.state.persons[0].name} changed={this.nameChangedHandler} v-if="showPreson" />
)
}
return (
<div className="App">
<button onClick={this.click}>显示与隐藏</button>
{/* 当showPreson为falser 的时候走这一步为空也就是隐藏 */}
{persons}
</div>
);
}
}
export default App;