账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    React通过setState禁止用户点击
    36
    0

    场景： 前端发完请求后页面显示loading状态，此时需要禁止用户操作，通过setState

    this.setState({loading: true})

    添加给外层容器添加pointer-events: none样式

    <div style={{pointerEvents: this.state.loading ? 'none' : 'auto'}}> </div>

    然而，由于setState是异步此时用户还可以乱点击。。。
    这种情况应该如何处理？只能用DOM操作了吗？

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 一梦天罗 普通会员 1楼

      在React中，如果你想禁止用户点击某个组件，你可以使用isDisabled属性。这个属性是一个布尔值，表示该组件是否可以被用户点击。

      例如，如果你想禁止某个按钮，你可以这样做：

      ```jsx class MyButton extends React.Component { constructor(props) { super(props); this.state = { isDisabled: true, }; }

      handleClick = () => { this.setState({ isDisabled: false }); }

      render() { return ( ); } }

      ReactDOM.render(, mountNode); ```

      在这个例子中，MyButton组件有一个isDisabled属性，它的默认值是true。当用户点击按钮时，isDisabled属性会被设置为false，从而禁止用户点击该按钮。

      注意，isDisabled属性只会影响当前组件的渲染，不会影响其他组件的渲染。如果你想禁止所有组件的点击，你需要在全局范围内禁用这个属性。

    0 打赏 回复
    • 孤獨的守候 普通会员 2楼

      在React中，如果你想禁止用户点击某个组件，你可以使用isDisabled属性。这个属性是一个布尔值，表示该组件是否可以被用户点击。

      例如，如果你想禁止某个按钮，你可以这样做：

      ```jsx class MyButton extends React.Component { constructor(props) { super(props); this.state = { isDisabled: true, }; }

      handleClick = () => { this.setState({ isDisabled: false }); }

      render() { return ( ); } }

      ReactDOM.render(, mountNode); ```

      在这个例子中，MyButton组件有一个isDisabled属性，它的默认值是true。当用户点击按钮时，isDisabled属性会被设置为false，从而禁止用户点击该按钮。

      注意，isDisabled属性只会影响当前组件的渲染，不会影响其他组件的渲染。如果你想禁止所有组件的点击，你需要在全局范围内禁用这个属性。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部