import React, {
Component } from 'react'
class App extends Component {
//首先先写他的构造方法(构造函数)
constructor(){
//super:继承
super()
this.state = {
inputValue: '',
list : []
}
}
//input框输入事件
// 通过事件源的方式拿到输入框内的输入的值
// 所有的事件都有默认参数 event(事件),事件上有一个事件属性(target)
handelInput(event){
// 使用setState方法修改输入框内的值
this.setState({
inputValue :event.target.value
})}
//添加事件
handelAdd(){
//通过添加事件可以拿到输入框中的值
// console.log(this.state.inputValue)
// 由于我们需要动态的往里面添加值,那么该怎么修改?
//1.获取list的副本
let list = this.state.list
//先判断目前输入框中的内容是否为空,如果为空的话就什么也不返回
if(this.state.inputValue.trim() === ''){
return
}else{
//如果输入框内内容不为空的话将输入框内的值后增到list副本中
list.push(this.state.inputValue)
}
// 2.修改state数据
this.setState({
inputValue :'',
//用这个副本的list去替换掉构造方法中的list
list
})
}
// 删除事件
handelDel(index){
//1.获取list的副本
let list = this.state.list
list.splice(index,1)
// console.log(index);
// 2.修改state数据
this.setState({
//用这个副本的list去替换掉构造方法中的list
list
})
}
//修改事件
handelUpdate(index){
//让用户输入一个修改后的值
let val = window.prompt('请输入修改后的值:')
if(val.trim() === ''){
return
}
//1.获取list的副本
let list = this.state.list
list.splice(index,1,val)
// 2.修改state数据
// console.log(index);
this.setState({
//用这个副本的list去替换掉构造方法中的list
list
})
}
render() {
return (
<div>
{
/* 这个是将inputValue中的值可以显示在input中 */}
{
/* onInput 输入事件 */}
<input value={
this.state.inputValue}
onInput={
this.handelInput.bind(this)}
//键盘按下事件,当按下Enter的时候执行添加方法
onKeyDown={
e=>{
if(e.code === 'Enter'){
this.handelAdd()
}
}}
>
</input>
<button onClick={
this.handelAdd.bind(this)}>添加</button>
<ul>
{
/* 通过遍历的方式将list中的元素放在li中并且展示出来 */}
{
this.state.list.map((item,index)=>{
return (<li key={
index} style={
{
margin :'10px 0px'}}>
{
item}
<button onClick={
this.handelUpdate.bind(this,index)}>修改</button>
<button onClick={
this.handelDel.bind(this,index)}>删除</button>
</li>)
})}
</ul>
</div>
)
}
}
export default App
如何使用React实现简易的输入框增、删、改操作?
猜你喜欢
转载自blog.csdn.net/ni15534789894/article/details/112578430
今日推荐
周排行