react+react-beautiful-dnd实例代办事项_ react-beautiful-dnd教程(2)

最新推荐文章于 2024-09-27 07:04:38 发布

原创

最新推荐文章于 2024-09-27 07:04:38 发布

· 621 阅读

8 ·

版权

文章标签：

#react.js #javascript #前端

// 添加处理函数
add=()=>{
    // add方法通过props从App传入
    this.props.add(this.state.inputValue)
    this.state.inputValue=''
    // ref绑定后通过inputRef.current拿到DOM元素
    this.inputRef.current.focus()
}
render() {
    return(
            <div className="panel-block">
                <p className="control has-icons-left">
                    <input
                        className="input is-success"
                        type="text"
                        placeholder="输入代办事项"
                        value={this.state.inputValue}
                        onChange={this.handleChang}
                        onKeyDown={this.handleDown.bind(this)} //该变this指向
                        ref={this.inputRef}
                    />
                </p>
            </div>
    )
}

}


#### 介绍下[react-beautiful-dnd](https://bbs.youkuaiyun.com/topics/618545628)处理函数


* 官方解析图  
 ![请添加图片描述](https://img-blog.csdnimg.cn/401a588ad7f64b2a80cf948255b29292.gif)
* 格式DragDropContext最外面盒子Droppable第二层盒子

{provided=>( <\* ref={provided.innerRef} {...provided.droppableProps} // 官方固定格式 > 自己的代码 <\*/> {provided.placeholder} )}


* 格式Draggable最里面盒子

{provided=>( <\* {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} > 自己的代码 <\*/> {provided.placeholder} )}


* 一但移动（从第5个事件移动到第4个事件）onDragEnd回调函数打印结果console.log(result)

{draggableId: ‘5’, type: ‘DEFAULT’, source: {…}, reason: ‘DROP’, mode: ‘FLUID’, …}
combine: null
destination: {droppableId: ‘columns’, index: 4} // 移动到第4个事件
draggableId: “5”
mode: “FLUID”
reason: “DROP”
source: {index: 5, droppableId: ‘columns’} // 移动的第5个事件
type: “DEFAULT”
[[Prototype]]: Object