入门react,做一个输入框输入类内容点击按钮下面列表添加输入的内容,首先拆分为两个模块,一个是输入添加模块,一个是显示内容模块,
import
React ,{
Component,
Fragment}
from
'react'
import
TodoItem
from
'./TodoItem'
import
'./style.css'
class
TodoList
extends
Component {
constructor(
props){
super(
props);
this.
state = {
inputVale:
'',
list:[]
}
this.
handleInputChange =
this.
handleInputChange.
bind(
this)
this.
handleBtnClick =
this.
handleBtnClick.
bind(
this)
this.
handleItemDelete =
this.
handleItemDelete.
bind(
this)
}
render(){
return(
<
Fragment
>
<
div
>
{
/* 下面是一个注释 */
}
<
label
htmlFor=
"insertArea"
>输入类容
</
label
>
<
input
id=
"insertArea"
className=
"input"
value=
{this.
state.
inputVale
}
onChange=
{this.
handleInputChange
}
/>
<
button
onClick=
{this.
handleBtnClick
}
>提交
</
button
>
</
div
>
<
ul
>
{
this.
getTodoItem()
// this.state.list.map((item,index)=>{
// return (
// <div>
// <TodoItem
// item={item}
// index={index}
// key={index}
// deleteItem={this.handleItemDelete}
// />
// </div>
// )
// })
}
</
ul
>
</
Fragment
>
)
}
getTodoItem(){
return
this.
state.
list.
map((
item,
index)
=>{
return (
<
TodoItem
key=
{
index
}
index=
{
index
}
item=
{
item
}
deleteItem=
{this.
handleItemDelete
}
/>
)
})
}
handleInputChange(
e){
const
value =
e.
target.
value
this.
setState(()
=>{
return{
inputVale:value
}
})
// this.setState({
// inputVale:e.target.value
// })
}
handleBtnClick(){
this.
setState((
prevState)
=>{
return{
list:[...
prevState.
list,
prevState.
inputVale],
inputVale:
''
}
})
// this.setState({
// list:[...this.state.list,this.state.inputVale],
// inputVale:''
// })
}
handleItemDelete(
index){
// const list = [...this.state.list];
// list.splice(index,1)
this.
setState((
prevState)
=>{
const
list = [...
prevState.
list]
list.
splice(
index,
1)
return{
list
}
})
// this.setState({
// list:list
// })
}
}
export
default
TodoList;
上面是输入添加某块,首先handleInputChange绑定输入的值,然后点击提交的时候我们在list里面添加输入的值,在render里面我们可以把循环展示的抽离出来当作这一个方法
然后在向子组件传值。
import
React,{
Component}
from
'react'
import
PropTypes
from
'prop-types'
class
TodoItem
extends
Component{
constructor(
props){
super(
props)
this.
handleClick =
this.
handleClick.
bind(
this)
}
render(){
const {
item,
test} =
this.
props
return (
<
div
onClick=
{this.
handleClick
}
>
{
test
}--
{
item
}
</
div
>
)
}
handleClick(){
const {
deleteItem,
index} =
this.
props
deleteItem(
index)
// this.props.deleteItem(this.props.index)
}
}
TodoItem.
propTypes = {
test:PropTypes.
string.
isRequired,
//父组件必传必传
item:PropTypes.
arrayOf(
PropTypes.
number,
PropTypes.
string),
//字符串或者数字
deleteItem:PropTypes.
func,
index:PropTypes.
number
}
TodoItem.
defaultProps ={
test:
'hello world'
//没传就是hello world
}
export
default
TodoItem
子组件接受值,下面定义父组件传来的值的类型。关于删除,父组件向子组件传index,以及方法,子组件在方法里面传入index,父组件实现按方法。
子组件接收父组件的值本是this.props.item 这里写成const {item} = this.props是一样的 es6的解构赋值。