注释方法
render() {
return (
// fragment内部封装的站位符
<fragment>
{
// 注释方式1--多行注释
}
{/*注释方式2--单行注释*/}
</fragment>
样式命名
将class改为className
因为react会将class认为是一个类 class是个关键词
对html标签进行识别
{
this.state.list.map((item, index) => {
return (
<li
key={index}
onClick={this.handleInputdele.bind(this, index)}
dangerouslySetInnerHTML={{__html: item}}
//对html的标签不进行转义
></li>
)
})
}
label扩大点击范围
<div>
//htmlFor会区别循环的for
// htmlFor='元素id'
<label htmlFor="insertArea">请输入内容</label>
<input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} className="input" id="insertArea"/>
<button onClick={this.handleSubmlit.bind(this)}>提交</button>
</div>
setState的同步异步区别
- 同步设置
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
- 异步设置 es6语法继续优化
- prevState表示代表修改前的数据状态 就等同于this.state
this.setState((prevState) => ({
list: [...prevState.list, prevState.inputValue],
inputValue: ''
}))
propTypes定义props传参的数据类型
defaultProps给props传参变量定义默认值
ref获取dom元素
render() {
return (
<fragment>
<div>
<label htmlFor="insertArea">请输入内容</label>
<input
value={this.state.inputValue}
onChange={this.handleInputChange.bind(this)}
className="input" id="insertArea"
ref={(input)=>{this.input=input}}
//ref用来获取元素
/>
</div>
</fragment>
);
}
handleInputChange(e) {
var value=this.input.value
this.setState({
// inputValue: e.target.value
inputValue: value
})
}