问题描述
这是包含在 div 中的书籍列表的样子
<div>
<listOfBooks/>
</div>
问题:
我正在尝试在这个 React 应用程序中创建一个功能,允许您拖动和选择多本书。将它们从这种绿色更改为红色。基本上就像从起点到终点画一条线,线结束的地方都应该标记为红色。
我尝试过的事情:
我尝试在位于下方的 bookicofunc 组件内的 useEffect() 内使用 document.onMouseUp() document.onMouseDown() 和 document.onMouseOver()
尝试使用与提供程序匹配的上下文钩子。它会在控制台中记录正确的内容,但仅在选择时拖动时不会更改颜色。
代码:
BookIcoFunc.jsx
import React,{useState,useRef,useEffect,useContext} from 'react'
import { FaBook } from 'react-icons/fa'
import BookIcoContext from '../../context/BookIconContext';
export default function BookIconFunc(props) {
const [selected,setSelected] = useState(props.checkedOut)
var color = selected ? 'red' : 'green'
const gotClicked = useContext(BookIcoContext)
/*
if selected = false that means it is available
when clicked it should turn red
*/
const indBook = {
margin: "0.5rem",color: color
}
useEffect(() => {
if(gotClicked === true){
setSelected(!selected)
// color = selected ? 'red' : 'green'
}
},[selected])
return <div>
<FaBook
className={props.className}
style={indBook} size={32}
onMouseOver={() => {
console.log(gotClicked);
// if(gotClicked === true){
// setSelected(!selected)
// color = !selected ? 'red' : 'green'
// }
}}
onMouseDown={() => {
setSelected(!selected)
}}
onMouseUp={() => {
}}
>
</FaBook>
</div>
}
BooksUpdate.jsx
import BookIconFunc from '../components/helperComponents/bookIconFunc'
import BookIcoContext from '../context/BookIconContext';
export default function BooksUpdate(props) {
/* BOOK ICON CONTEXT STATE */
const [iconState,setIconState] = useState(false)
return <BookIcoContext.Provider value={{iconState,setIconState}}>
<div style={booksRows} onClick={() => setIconState(true)} onMouseUp={() => setIconState(false)}>
{
copies ? copies.map((copy,index) => {
return <div
key={index}
>
<BookIconFunc
className={classNameChanged}
checkedOut={copy.checkedOut}
ref={bookicoref[index]}
>
</BookIconFunc>
</div>
})
:
<div>none</div>
}
</div>
</BookIcoContext.Provider>
bookicocontext.js
import { createContext } from 'react';
export default createContext(null);
让我知道我是否应该进一步解释或提供更多代码!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)