onchange事件实现编辑_教程11——ref 及键盘事件--完成 todoList

最新推荐文章于 2024-06-05 17:23:23 发布
最新推荐文章于 2024-06-05 17:23:23 发布
阅读量266 收藏
点赞数
文章标签： onchange事件实现编辑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39664136/article/details/111676619
版权

369b388c52901b326042491b3d11047c.png

前言：我们一般在输入框中输入文字，点击添加按钮实现；但有些人不想用鼠标去点击，直接输入完成后回车，也是可以实现的，这就是键盘事件。

一、键盘事件（回车...）

TodoInput 文件：

import React, { Component } from 'react'

export default class TodoInput extends Component {
    static defaultProps={
        btnText:'添加TODO'
    }
    constructor(){
        super()
        this.state={
            inputValue:''
        }
    }
    handleInputChange = (e) => {
        this.setState({
            inputValue:e.currentTarget.value
        })
    }
    handleAddClick = (e) => {
        console.log(e)     //试试
        this.props.addTodo(this.state.inputValue)  //子组件向父组件传递
    }

    render() {
        return (
            <div>
                <input
                  type="text"
                  value={this.state.inputValue} 
                  onChange={this.handleInputChange}
                  onKeyUp={this.handleAddClick}           //这里！！！
                  />
                <button onClick={this.handleAddClick}>
                    {this.props.btnText}
                </button>
            </div>
        )
    }
}

结果：在输入的时候会发现，它就已经获取了，并没有通过回车键，所以这样做是不对的。

TodoInput 文件：（正确写法）

import React, { Component } from 'react'

export default class TodoInput extends Component {
    // static propTypes={
    //     btnText:propTypes.string
    // }
    static defaultProps={
        btnText:'添加TODO'
    }
    constructor(){
        super()
        this.state={
            inputValue:''
        }
    }
    handleInputChange = (e) => {
        this.setState({
            inputValue:e.currentTarget.value
        })
    }
    handleKeyUp = (e) => {            //回车事件
        if(e.keyCode === 13){
            this.handleAddClick()
        }
    }
    handleAddClick = (e) => {
        this.props.addTodo(this.state.inputValue)  //子组件向父组件传递
    }

    render() {
        return (
            <div>
                <input
                  type="text"
                  value={this.state.inputValue} 
                  onChange={this.handleInputChange}   //点击事件
                  onKeyUp={this.handleKeyUp}          //回车事件
                  />
                <button onClick={this.handleAddClick}>
                    {this.props.btnText}
                </button>
            </div>
        )
    }
}

结果回车、添加按钮都可以实现

二、ref

react 里面通过 ref 来获取组件或者 dom 元素

要使用 ref 之前必需先调 React.createRef 方法来创建一个 ref

在 constructor 里创建 ref，我们把创建的结果赋值给一个 this

import React, { Component,createRef } from 'react'

TodoInput 文件：

import React, { Component,createRef } from 'react'

export default class TodoInput extends Component {
    // static propTypes={
    //     btnText:propTypes.string
    // }
    static defaultProps={
        btnText:'添加TODO'
    }
    constructor(){
        super()
        this.state={
            inputValue:''
        }
        this.inputDom=createRef()   //创建ref
    }
    handleInputChange = (e) => {
        this.setState({
            inputValue:e.currentTarget.value
        })
    }
    handleKeyUp = (e) => {            //回车事件
        if(e.keyCode === 13){
            this.handleAddClick()
        }
    }
    handleAddClick = (e) => {

        //实际项目会对this.state.inputValue做验证，验证通过才继续执行下面的方法

        if (this.state.inputValue === '') {
            return
        }
        this.props.addTodo(this.state.inputValue)  //子组件向父组件传递
        this.setState({
            inputValue:''
        },() => {
            this.inputDom.current.focus()
        })
    }

    render() {
        return (
            <div>
                <input
                  type="text"
                  value={this.state.inputValue} 
                  onChange={this.handleInputChange}   //点击事件
                  onKeyUp={this.handleKeyUp}          //回车事件
                  ref={this.inputDom}        //ref
                  />
                <button onClick={this.handleAddClick}>
                    {this.props.btnText}
                </button>
            </div>
        )
    }
}

三、删除事件

应该写在 App.js 文件里面：通过 TodoList 把事件继续往下传递

四、改变完成、未完成状态

TodoItem 文件：

import React, { Component } from 'react'

export default class TodoItem extends Component {
    handleCheckboxChange = () =>{
        // console.log('changed')
        this.props.onCompeletedChange()
        
    }
    render() {
        return (
            <li>
                <input
                  checked={this.props.isCompleted}
                  onChange={this.handleCheckboxChange}
                  type="checkbox"
                />
                <span>{this.props.title}{this.props.isCompleted ? '完成' : '未完成'}</span>
            </li>
        )
    }
}

App.js 文件：

import React, { Component } from 'react'
import{
    TodoHeader,
    TodoInput,
    TodoList,
    Like
} from './components'

export default class App extends Component {
    // state = {
    //     title:'待办事项列表'
    // }

    constructor(){
        super()
        this.state={
            title:'待办事项列表',
            desc:'今日事，今日毕',
            todos:[{
                id:1,
                title:'吃饭',
                assignee:'FatBaby',
                article:'<div>aaaaaa</div><i>bbbbb</i>',
                isCompleted:true
            },{
                id:2,
                title:'睡觉',
                assignee:'HeiWa',
                isCompleted:false
            }]
        }
    }

    addTodo = (TodoTitle) => {     //TodoInput 里面去执行这个方法
        console.log(TodoTitle)
        // this.setState({
        //     todos:this.state.todos.concat({
        //         id:Math.random(),
        //         title:TodoTitle,
        //         isCompleted:false
        //     })
        // })

        const newTodos=this.state.todos.slice()   //重新复制一份数组
        newTodos.push({
            id:Math.random(),
            title:TodoTitle,
            isCompleted:false
        })
        this.setState({
            todos:newTodos
        })  
    }

    onCompeletedChange = () =>{
        console.log('onCompeletedChange');
        
    }

    render() {
        return (
            <>
                <TodoHeader desc={this.state.desc}>
                    {this.state.title}
                </TodoHeader>
                <TodoInput
                 addTodo={this.addTodo}
                />
                <TodoList
                  todos={this.state.todos}
                  onCompeletedChange={this.onCompeletedChange}
                 /> 
                <Like />
            </>
        )
    }
}

TodoList 文件：

import React, { Component } from 'react'
import TodoItem from './TodoItem'
import PropTypes from 'prop-types'

export default class TodoList extends Component {
    static propTypes={
        todos:PropTypes.arrayOf(PropTypes.shape({
            id:PropTypes.number.isRequired,
            title:PropTypes.string.isRequired,
            isCompleted:PropTypes.bool.isRequired
        })).isRequired,
        onCompeletedChange:PropTypes.func
    }
    render() {
        return (
            <ul>
                {
                    this.props.todos.map(todo => {
                        return(
                            // <TodoItem
                            //   key={todo.id}
                            //   id={todo.id}
                            //   title={todo.title}
                            //   assignee={todo.assignee}
                            //   isCompleted={todo.isCompleted}
                            // />
                            <TodoItem
                              onCompeletedChange={this.props.onCompeletedChange}
                              key={todo.id}
                              {...todo}
                            />
                        )
                    })
                }
            </ul>
        )
    }
}

7f4d9f44cf17af068c3b5f479567eb6d.png
结果：当我想改变它的‘完成’状态，点击后执行了

现在做成可以点击的状态

App.js 文件：

import React, { Component } from 'react'
import{
    TodoHeader,
    TodoInput,
    TodoList,
    Like
} from './components'

export default class App extends Component {
    constructor(){
        super()
        this.state={
            title:'待办事项列表',
            desc:'今日事，今日毕',
            todos:[{
                id:1,
                title:'吃饭',
                assignee:'FatBaby',
                article:'<div>aaaaaa</div><i>bbbbb</i>',
                isCompleted:true
            },{
                id:2,
                title:'睡觉',
                assignee:'HeiWa',
                isCompleted:false
            }]
        }
    }

    addTodo = (TodoTitle) => {                            //TodoInput 里面去执行这个方法
        const newTodos=this.state.todos.slice()           //重新复制一份数组
        newTodos.push({
            id:Math.random(),
            title:TodoTitle,
            isCompleted:false
        })
        this.setState({
            todos:newTodos
        })  
    }

    onCompeletedChange = (id) =>{
        console.log('onCompeletedChange',id);             //获取到id
        this.setState((prevState) => {                    //可以点击按钮
            return{
                todos:prevState.todos.map(todo =>{
                    if(todo.id === id){
                        todo.isCompleted=!todo.isCompleted
                    }
                    return todo
                })
            }
        })
    }

    render() {
        return (
            <>
                <TodoHeader desc={this.state.desc}>
                    {this.state.title}
                </TodoHeader>
                <TodoInput
                 addTodo={this.addTodo}
                />
                <TodoList
                  todos={this.state.todos}
                  onCompeletedChange={this.onCompeletedChange}       //!!!!
                 /> 
                <Like />
            </>
        )
    }
}

结果：是可以点击的状态了

那如果我这里没有传这个东西呢？？

 onCompeletedChange={this.onCompeletedChange}

报错是肯定的啊，那怎么改

那咱们去调用这个东西之前是不是应该去做一个判断

this.props.onCompeletedChange && this.props.onCompeletedChange(this.props.id)

一般我们会这样来写

const{
            onCompeletedChange,
            id
        }=this.props
        onCompeletedChange && onCompeletedChange(id)

或者

const{
            onCompeletedChange = () => {},
            id
        }=this.props
        onCompeletedChange(id)
    }

最终代码（完整版）

TodoItem 文件：

import React, { Component } from 'react'

export default class TodoItem extends Component {
    handleCheckboxChange = () =>{
        // console.log('changed')

        // this.props.onCompeletedChange && this.props.onCompeletedChange(this.props.id)

        const{       //解构
            onCompeletedChange = noop,          //noop 其实就是一个空函数
            id
        }=this.props
        onCompeletedChange(id)
    }
    render() {
        const{     //解构，代码写起来更方便
            isCompleted,
            title
        }=this.props

        return (
            <li>
                <input
                  checked={isCompleted}
                  onChange={this.handleCheckboxChange}
                  type="checkbox"
                />
                <span>{title}{isCompleted ? '完成' : '未完成'}</span>
            </li>
        )
    }
}

App.js 文件：

import React, { Component } from 'react'
import{
    TodoHeader,
    TodoInput,
    TodoList,
    Like
} from './components'

export default class App extends Component {
    // state = {
    //     title:'待办事项列表'
    // }

    constructor(){
        super()
        this.state={
            title:'待办事项列表',
            desc:'今日事，今日毕',
            todos:[{
                id:1,
                title:'吃饭',
                assignee:'FatBaby',
                article:'<div>aaaaaa</div><i>bbbbb</i>',
                isCompleted:true
            },{
                id:2,
                title:'睡觉',
                assignee:'HeiWa',
                isCompleted:false
            }]
        }
    }

    addTodo = (TodoTitle) => {     //TodoInput 里面去执行这个方法
        console.log(TodoTitle)
        // this.setState({
        //     todos:this.state.todos.concat({
        //         id:Math.random(),
        //         title:TodoTitle,
        //         isCompleted:false
        //     })
        // })

        const newTodos=this.state.todos.slice()   //重新复制一份数组
        newTodos.push({
            id:Math.random(),
            title:TodoTitle,
            isCompleted:false
        })
        this.setState({
            todos:newTodos
        })  
    }

    onCompeletedChange = (id) =>{
        console.log('onCompeletedChange',id);   //获取到id
        this.setState((prevState) => {   //点击按钮
            return{
                todos:prevState.todos.map(todo =>{
                    if(todo.id === id){
                        todo.isCompleted=!todo.isCompleted
                    }
                    return todo
                })
            }
        })
    }

    render() {
        return (
            <>
                <TodoHeader desc={this.state.desc}>
                    {this.state.title}
                </TodoHeader>
                <TodoInput
                 addTodo={this.addTodo}
                />
                <TodoList
                  todos={this.state.todos}
                //  onCompeletedChange={this.onCompeletedChange}
                 /> 
                <Like />
            </>
        )
    }
}

over

weixin_39664136
关注
点击事件获取不到ref_React - ref
weixin_33236595的博客
01-24 1363
reference 引用function A (){ return (<h1>组件AAA</h1>) } ​ <A ref="comA" /> // 不可这样使用，但是函数组件内部是可以使用ref的过时方式（不要使用）以聚焦input事件为例，以前的ref使用方式，ref 值为string已经过时，随时可能被移除（不建议使用，在16版中已不再可用）e...
onchange、onkeyup事件的了解
千千
02-12 2864
最近在做番茄项目的注册界面，如果输入有问题，总是出来弹出框对用户的体验度不是很好，所以就想办法让它更好的提示用户。在调试的过程中，用了一些事件，对这些事件又有了更深入的了解，下面来谈一下。一、onchange()官方解释都是：在元素值改变时触发可是天真的小编真的以为，只要是输入框的内容以改变就会触发onchange事件，最终发现，触发是有条件的。条件：1、绑定onchange事件         ...
通过ref触发子组件的事件
i_kun的博客
04-14 1323
父组件中子组件用ref取一个名字。 <template> <div id="app"> <!--父组件--> <input v-model="msg"> <button v-on:click="notify">广播事件</button> <!--子组件--> <popup ref="child" ></popup> </div> </template
ref和事件绑定
qq_45903009的博客
04-09 1604
文章目录一：state状态1·1：函数组件使用状态1·2：类组件使用状态1·2·1：setState()调用了之后干了什么事情？1·2·2：插入字符串html二：ref2·1:ref的作用2·2:ref的三种使用方法a:使用字符串b:使用回调函数(官方推荐)c:React.createRef( )三：受控组件四：事件处理4·1：绑定事件的方式有四种a:箭头函数的创建b:事件调用的写法改为箭头函数的形式c:通过bind方法进行原地绑定d:在constructor中提前对事件进行绑定4·2：绑定事件传参数到函数
关于事件点击后加.xxx的（如：click.ref）到底是什么意思呢
douyabb的博客
09-25 1362
$("#code-img").on("click.ref", function(e) {}，经常会看到这样的事件绑定写法，到底是什么意思呢？   这种绑定方式是事件命名空间，ref是编写者的命名空间，这样写，说白了就是用来做区别的，    这样写和不加 .xxx写效果是一样的，唯一的区别就是解绑的时候，如果绑定了两个，一个click，   一个click.xxx ， 解绑的时候off("cl
easyui-textbox和easyui-combobox的onchange事件响应实例
08-01
在这个实例中，我们将深入探讨 EasyUI 中的两个重要组件：`easyui-textbox` 和 `easyui-combobox`，以及它们的 `onchange` 事件响应。 `easyui-textbox` 是一个基础输入框组件，它扩展了原生 HTML 的 `input` 元素...
jsp中select的onchange事件用法实例
10-23
本文将详细探讨在JSP中如何使用select的onchange事件，包括数据库查询、数据遍历及与JavaScript的集成。 ### JSP中select的onchange事件用法 首先，我们需要了解什么是onchange事件。在HTML中，onchange是一个事件...
js 触发select onchange事件代码
01-19
select 或text的onchange事件需要手动（通过键盘输入）改变select或text的值才能触发，如果在js中给select或text赋值，则无法触发onchang事件， 例如，在页面加载完成以后，需要触发一个onChange事件，在js中用...
关于onchange事件在IE和FF下的表现及解决方法
09-04
因此，作者给出的最终解决方案是，为IE浏览器绑定onpropertychange事件，而为Firefox及其他浏览器绑定onchange事件。这是一个典型的浏览器兼容性处理策略，通过条件判断用户的浏览器类型，从而绑定不同的事件处理器...
通过$refs切换tab动态加载不同的组件
uniquemei的博客
03-16 1014
在项目开发中，经常会遇到，切换不同的tab页，展示不同的数据的需求。不同的应用场景需求不一样，有的需要切换tab页，不时时网络请求数据，这就需要做数据缓存，components组件本身就加载一次，数据可以缓存；有的需求则就需要动态加载，那么我们怎么做呢，可以通过用refs来调用子组件的网络请求方法。 （一）index界面 index界面通过v-show绑定了不同的界面，根据不同的tab，来控制数界面的切换。 <div class="rewardIndex"> <div class=
vue3中的ref函数
最新发布
qq_44777163的博客
06-05 306
button @click="btn">点击更新视图层某一个数据const obj=ref({tabao:'淘宝',tamll:'天猫'})arr.value[0].xiami='虾米音乐544847'}产品：{{obj.tabao}}公司：{{company}}姓名：{{name}}年龄：{{age}}obj.value.tabao='淘宝002'{name.value='马化腾'xiami:'虾米音乐'}])
Enter触发键盘按下事件
mfxcyh的博客
07-24 1504
e.ketCode!==13每一个按键都有属于自己的按键编码，Enter的按键编码为13。@keyup.enter="enter在键盘事件上追加enter事件修饰符。
解决element-ui el-dialog 中 含有el-table时 $refs获取不到的问题
微雨燕双飞
03-25 6689
在项目中遇到一个坑，element-ui el-dialog 中 含有el-table时 $refs获取table的ref总是undefined 研究了很久发现一个解决办法有效，比定时器先打开dialog再关闭的方案好多了 //点击显示Dialog showParentModel(){ //这个是dialog显示 this.dialogParentVisible = true; ...
select的onchange事件执行后，设置焦点失效问题
langmnm的博客
04-16 735
在执行select的onchange事件后，设置focus失效，则可以利用 setTimeout(function(){document.getElementById(lstXXX).focus()}, 1);
onchange() 事件
热门推荐
红色枫叶的博客
10-10 2万+
onchange 事件会在域的内容改变时发生。 onchange 事件也可用于单选框与复选框改变后触发的事件。 支持该事件的 HTML 标签, , 支持该事件的 JavaScript 对象： fileUpload, select, text, textarea 在本例中，我们将在用户改变输入域内容时执行 JavaScript 代码： &lt;html&gt; &lt;head&gt; &l...
vue模拟点击事件
qq719756146的博客
12-05 2万+
通过vue的ref this.$refs.refName.click()
vue 笔记，ref 及 $event 事件对象
weixin_30781107的博客
07-09 271
本文仅用作简单记录 ref ： 在标签上添加 ref = “name” ，表示获取当前元素节点 <input type="text" ref="info"> 获取 this.$refs.info.value 　　 获取事件对象 ， 方法参数传递 $event <button @click="Event($event)">事...
Vue3.0 使用 ref 判断目标 node 区域之外的点击事件（实现下拉框、弹窗关闭功能）
奔跑的面条博客
11-13 3102
有时候会遇到点击目标区域绑定事件 / 展示效果，然后点击目标区域之外的地方就关闭效果 / 触发另一事件，为了实现这样的功能，我们需要通过比对 node 节点来进行判断，在下面我会使用 Vue3.0 的 ref 属性用法与 node.contains 方法来进行案例展示。 hooks 方法如下 // 判断元素是否在 node 区域之外 import { ref, onMounted, onUnmounted, Ref } from 'vue' const useClickOutside = (eleme.
Vue(基础五)_vue中用ref和给dom添加事件的特殊情况
weixin_30443075的博客
03-30 1803
一、前言 这篇文章涉及的主要内容有： 1、ref绑定在标签上是获取DOM对象 ...
JavaScript文本域事件教程：onFocus, onBlur, onChange详解
文本域事件是JavaScript编程中的关键组成部分，特别是在T16.1经典教程中，这一章节详细介绍了如何利用这种技术增强用户的文本输入体验。JavaScript是一种基于对象和事件驱动的脚本语言，它最初源于Sun公司的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值