React实例1-列表渲染和按钮添加操作

最新推荐文章于 2024-01-10 17:49:24 发布

仲尼叔叔

最新推荐文章于 2024-01-10 17:49:24 发布

阅读量1.6k

点赞数

分类专栏： React.js 文章标签： javascript reactjs

本文链接：https://blog.youkuaiyun.com/weixin_40826349/article/details/108966329

版权

React.js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在React中将服务列表从静态变为动态，通过数据化列表并使用JavaScript进行渲染。同时，讲解了如何添加新的服务选项，以及解决在渲染过程中遇到的key值错误问题，提供了一个完整的示例代码，包括输入框、按钮和列表的交互实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.渲染服务列表

现在的列表是写死的两个li标签，倘若我们需要将其变成动态的，那我们就需要把这个列表进行数据化，然后通过js代码循环到页面上。

constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'' , 
        //----------主要 代码--------start
        list:['推拿','敲背']   
        //----------主要 代码--------end
    }
}

然后我们进行页面数据渲染。

render(){
    return  (
        <Fragment>
            <div>
                <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                <button> 增加服务 </button>
            </div>
            <ul>
                {
                    this.state.list.map((item,index)=>{
                      return <li>{item}<li>
                    })
                }
            </ul>  
        </Fragment>
    )
}

2.增加服务选项

我们先给button按钮绑定一个addList方法

<button onClick={this.addList.bind(this)}> 增加服务 </button>

addList代码如下：

//增加服务的按钮响应方法
addList(){
  this.setState({
    list:[...this.state.list,this.state.inputVal] //扩展运算符
    //把list数组进行了分解，形成了新的数组，然后再进行组合。
  })
}

3.解决key值错误问题

F12打开浏览器控制台，看见报错，意思是缺少key值。在用map循环时，需要设置一个不同的值，这是react的要求。我们可以暂时使用index+item代替，防止重复。

<ul>
    {
        this.state.list.map((item,index)=>{
            return <li key={index+item}>{item}</li>
        })
    }
</ul>

个人博客：Karma’s Blog
源码地址：传送门