入门react

最新推荐文章于 2024-05-16 20:30:06 发布

axibadexiang

最新推荐文章于 2024-05-16 20:30:06 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/axibadexiang/article/details/80885737

入门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