添加了新的replay之后,怎样把input里的内容清空?

来源:4-2 留言本实例编码

慕前端3151062

2018-09-18 19:59

添加了新的replay之后,怎样把input里的内容清空?

写回答 关注

4回答

  • 张轩
    2018-09-18 22:41:57

    你写的很认真。点赞! 有几点可以改进,1 删除的回调函数也许不需要传入 e 这个event object,直接把 index 传入岂不是更好? 2 在 deleteComment 方法中,你选用了 splice 来删除,splice 是个 mutable 的方法,当然也没问题,也可以试试用 数组上面的 filter 方法,这个函数是 immtuable 的,而且更好理解。3 既然 clickHandler 里面只有一行,是不是可以试试直接用箭头函数作为回调? 例如 onClick={(e)=> { .... }}

    幕布斯331...

    this.state.comments.filter((num, index) => console.log(num, this.state.comments[index]))

    2019-08-26 19:02:51

    共 2 条回复 >

  • 秋夜月moon
    2018-12-06 16:29:36

    清空操作可以试试在提交的时候进行,也就是在handleSubmit()方法中,添加

    this.textInput.value = ''


  • qq_长流_0
    2018-12-04 16:37:29

    emmmm......我觉得不用这样的,加一个函数

    componentDidUpdate(prevProps, prevState, snapshot) {
        document.getElementById('comment').value = ""
    }


    qq_长流_...

    对了 input 上面要给个id="comment"

    2018-12-04 16:38:13

    共 1 条回复 >

  • 慕前端3151062
    2018-09-18 20:38:00

    刚问完发现是老师留的作业……那我就自问自答一下吧:

    在CommentBox.js里的handleSubmit里加上一句: 

    this.textInput.value=""

    即可


    加删除按钮比较麻烦点,CommentList.js文件中,把ul标签修改如下:

    <ul className="list-group mb-3">
    {    
        this.props.comments.map((comment, index) =>        
            <li key={index} className="list-group-item">{comment}
            <button
                type="button"
                className="btn btn-danger btn-sm"
                data-index={index}
                onClick={this.clickHandler}
             >
             删除
             </button>
             </li>
         )
    }
    </ul>

    同时加入clickHandler方法

    clickHandler(e) {
        this.props.onDeleteComment(e)
    }

    最后,在App.js里,首先把CommentList标签加入onDeleteComment属性

    <CommentList comments={comments} onDeleteComment={this.deleteComment} />

    再加入deleteComment方法:

    deleteComment(e) {
        const index = e.target.getAttribute("data-index");
        let newComments = this.state.comments
        newComments.splice(index, 1)
        this.setState({
            comments: newComments
        })
    }

    我在删除按钮上加了一个data-index属性用来传递comment的index,不确定好不好,也不知道有没有更好的方法。欢迎大家讨论,也请老师指点。

    慕运维654...

    你好,我尝试将子组件中的handleClick方法传入参数由事件e改为index,但是直接改成index后index是[object Object]对象,仍然只能用getattribute方法传递index

    2019-11-06 13:37:23

    共 2 条回复 >

基于实例的 React16 傻瓜课程

通过一系列简单有趣的例子,让你了解 React16 的基本概念和新特性

22387 学习 · 106 问题

查看课程

相似问题