我正在做一个动漫项目。我的问题是,当我点击输入时,我想把它带到最前面。所以,我使用了“webkitRequestFullscreen()",但我不能将布尔值切换为true来使它生效。我寻找了一些解决方案,但我猜,我使用的Redux版本与他们的版本不同,我不理解他们。
下面是我的初始状态和减速器功能:
const initialState = {
items: [],
fullScreen: false,
}
reducers: {
toggleInputScreen: (state, action) => {
const id = action.payload
state.fullScreen = !state.fullScreen
},
},
主要组成部分:
let activeFullScreen = useSelector((state) => state.anime.fullScreen)
// console.log(activeFullScreen)
if (activeFullScreen) {
return inputRef.current.webkitRequestFullscreen()
}
<div
className="input-container"
onClick={() => dispatch(toggleInputScreen())}
id="input-div">
<input type="search" placeholder="Search..." ref={inputRef} />
</div>
我知道减速器功能是一个彻底的灾难。我怎么能切换全屏布尔当我点击输入?提前感谢。
1条答案
按热度按时间bgtovc5b1#
可能是减速器功能问题。
在Redux中,状态是不可变的,这意味着你永远不会修改状态,而是创建一个新的副本。另一个错误是,你必须在reducer函数中返回新的状态。
reducer是一种函数,它将当前的
state
和一个action
作为参数,并返回一个新的state
结果。[...]它们不允许修改现有的state
。相反,它们必须通过复制现有的state
并对复制的值进行修改来进行不可变的更新。- redux guide你可以通过遵循刚刚指定的规则来解决你的问题:
如果状态是一个对象,并且大小不断增加,可以使用
Object.assign()
方法创建该对象的副本,并轻松更改其值。请查看here和here。对于redux,可以使用以下模式:Object.assign({}, state, changes)
。在您的情况下,它将如下所示: