React之JSX的语法细节
带注释
import React, { Component, Fragment } from 'react'
import './style.css'
class TodoList extends Component {
constructor (props) {
super(props)
this.state = {
inputValue: '',
list: []
}
}
render () {
return (
//Fragment 替代最外层的div
<Fragment>
<div>
{/* 写注释方式一 */}
{
// 写注释方式二,且方式二 { // } 不能在同一行
}
<label
// label中的for会与react中的for混淆,使用htmlFor替代for
htmlFor="insertArea"
>
输入内容:
</label>
<input
id="insertArea"
// class在react中是一个类关键词,使用className替代class类样式键名
className='input'
value={this.state.inputValue}
// 使用bind改变this指向,使得handleInputChange方法中的this可以取到constructor中的属性
onChange={this.handleInputChange.bind(this)}
/>
<button
onClick={this.handleBtnChange.bind(this)}
>
提交
</button>
</div>
<ul>
{/* 使用map循环list中的数据,每次增加一个li标签 */}
{
this.state.list.map((item, index) => {
return (
<li
key={index}
onClick={this.handleItemDelete.bind(this, index)}
// dangerouslySetInnerHTML 输入框语法转义
dangerouslySetInnerHTML={{__html: item}}
>
{/* {item} */}
</li>
)
})
}
</ul>
</Fragment>
)
}
handleInputChange (e) {
this.setState({
inputValue: e.target.value
})
}
handleBtnChange () {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
handleItemDelete (index) {
// immutable
// state 不允许我们做任何的改变
const list = [...this.state.list]
list.splice(index, 1)
this.setState({
list: list
})
}
}
export default TodoList
原始代码
import React, { Component, Fragment } from 'react'
import './style.css'
class TodoList extends Component {
constructor (props) {
super(props)
this.state = {
inputValue: '',
list: []
}
}
render () {
return (
<Fragment>
<div>
{/* 写注释方式一 */}
{
// 写注释方式二,且方式二 { // } 不能在同一行
}
<label htmlFor="insertArea">输入内容:</label>
<input
id="insertArea"
className='input'
value={this.state.inputValue}
onChange={this.handleInputChange.bind(this)}
/>
<button
onClick={this.handleBtnChange.bind(this)}
>
提交
</button>
</div>
<ul>
{
this.state.list.map((item, index) => {
return (
<li
key={index}
onClick={this.handleItemDelete.bind(this, index)}
dangerouslySetInnerHTML={{__html: item}}
>
{/* {item} */}
</li>
)
})
}
</ul>
</Fragment>
)
}
handleInputChange (e) {
this.setState({
inputValue: e.target.value
})
}
handleBtnChange () {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
handleItemDelete (index) {
// immutable
// state 不允许我们做任何的改变
const list = [...this.state.list]
list.splice(index, 1)
this.setState({
list: list
})
}
}
export default TodoList
今天你学习了吗!!!