富文本展示 dangerouslySetInnerHTML主要用来渲染后端返回的代码
count:'<h1>123</h1>'
<div dangerouslySetInnerHTML={
{
__html:this.state.count
}
}>
</div>
div标签可替换为其他标签
模糊搜索+axios获取数据
async getdata(){
const {data:res}=await axios({
method:'get', 请求方法get/post
url:'https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159', 请求地址
headers:{ 请求头(从后端获得)
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529"
,"bc":"110100"}',
'X-Host': 'mall.film-ticket.cinema.list'
} })
this.setState({ 赋值
count:res.data.cinemas,
count2:res.data.cinemas
})
}
componentDidMount(){
this.getdata()
}
<input onInput={this.changeinput}/>
changeinput=(event)=>{ 不传值自带一个 event=调用的本身(该input)
const {count}=this.state
const val= event.target.value
name中包含val值
const a=count.filter(item =>item.name.toUpperCase().includes(val.toUpperCase()))
name前x个字与val相同
const a=count.filter(item => val===item.name.substr(0,val.length))
includes() 包含
this.setState({
count2:a
})
}
state状态
this.setState({
count:this.state.count+1
},()=>{
console.log(this.state.count);
})
属性props
类组件props
父组件引用子组件并添加props值 (title,leftshow,rightshow)
<div>
<Nav title='1' leftshow={true} rightshow={false}></Nav>
<Nav title='列表' leftshow={false} rightshow={true}></Nav>
</div>
子组件 通过this.props来使用父组件传来的props值
const {leftshow,rightshow}=this.props
<div>
{leftshow&&<button >left</button>}
<span>{this.props.title}</span>
{rightshow&&<button>right</button>}
</div>
props校验
首先引入 prop-types模块
import ifproptype from 'prop-types' ifproptype为自定义名
在子组件中
static propTypes={
title: ifproptype.string, 必须为字符串数据
leftshow: ifproptype.bool, 必须为true/false
}
props校验默认值
static defaultProps={
leftshow:true,
rightshow:true
}
函数组件props 父传子
父组件引用子组件并添加props值 (title,leftshow,rightshow)
<div>
<Nav title='123' rightshow={false}></Nav>
<Nav title='列表' leftshow={false} rightshow={true}></Nav>
</div>
子组件 通过props引用参数来使用父组件传来的props值
function Nav(props){
let {leftshow,rightshow}=props
return(
<div>
{leftshow&&<button >left</button>}
<span>{props.title}</span>
{rightshow&&<button>right</button>}
</div>
)
}
props校验
首先引入 prop-types模块
import ifproptype from 'prop-types' ifproptype为自定义名
在子组件中
Nav.propTypes={
title: ifproptype.string, 必须为字符串数据
leftshow: ifproptype.bool, 必须为true/false
}
props校验默认值
Nav.defaultProps={
leftshow:true,
rightshow:true
}
子传父
父组件
export class App extends Component {
add(a,b){
console.log(a,b); 通过参数来得到子组件传来的数据
}
render() {
return (
<div>
<Child event={this.add}></Child> 给子组件添加一个回调函数
</div>
)
}
}
子组件
class Child extends Component {
state={
count:1
}
render() {
return (
<div>
<button onClick={()=>{
通过调用父组件传来的函数来向父组件传递数据
return this.props.event(123,this.state.count)
}}>add</button>
</div>
)
}
}
通过ref实现子父子通信
父
创建ref对象
username=React.createRef()
password=React.createRef()
调用子组件
<Child lable='用戶名' type='text' ref={this.username} ></Child>
<Child lable='密码' type='password' ref={this.password}></Child>
<button onClick={()=>{
console.log(
this.password.current.state.val,
this.username.current.state.val)
通过this.username.current可以返回一个包含子组件大部分参数的对象
}}>登录</button>
<button onClick={()=>{
this.username.current.clear() 调用子组件中的clear函数来实现value的清空
this.password.current.clear()
}} >重置</button>
子
state={
val:''
}
clear(){
this.setState({
val:''
})
}
render() {
return (
<div>
<span>{this.props.lable}</span>
<input value={this.state.val} type={this.props.type} onChange={(e)=>{this.setState({val:e.target.value})}}></input>
</div>
)