如何用reactjs防止默认使用typescript

4bbkushb 于 2023-08-04 发布在 React

关注(0)|答案(3)|浏览(166)

这是我的组件。只要我打电话给活动就能正常工作。但是页面每次都会刷新。如何防止这种情况。我知道我需要添加event.preventDefult，但添加显示错误。请告诉我正确的方法：

export class Header extends React.Component {
    
    state:NaviState = {
        show:false
    }

    toggle = ():void =>{
        console.log("h"); //page getting refreshing each click
        this.state = {show:!this.state.show}
    }
    render() {
        return (
            <header>
               <h1><a className="hidden tantum-logo" href="#">Welocome to Tantum website</a></h1>
               <div className="screen"></div>
               <nav className="small">
                   <a className="nav-icon hidden" onClick={this.toggle} href="#">tantum-Menu</a>
               </nav>
            </header>
        )
    }
}

字符串

reactjs

来源：https://stackoverflow.com/questions/65377158/how-to-prevent-default-with-typescript-with-reactjs

3条答案

按热度按时间

tzdcorbm1#

你可以用两种不同的方法来解决这个问题：
1.删除href属性-因为你想添加一个onClick监听器，你可以不提供href值，这应该可以防止页面重新加载;
1.如果你想保留href（不知道为什么要这样做），你可以在函数中拦截事件：

toggle = (ev) : any => { // event is implicitly passed to the function
        e.preventDefault();
        e.stopImmediatePropogation(); // might not be needed, would need testing.
        this.state = {show:!this.state.show}
    }

字符串

赞(0）回复(0）举报 2023-08-04

6rqinv9w2#

@Thanks Ayushya，它对我很有效：

toggle = (e: { preventDefault: () => void; }):any =>{
  e.preventDefault();
  this.state = {show:!this.state.show};
}

字符串

赞(0）回复(0）举报 2023-08-04

v8wbuo2f3#

删除href可能并不适用于所有情况（机器人、抓取器、服务器端渲染），所以我提供了一个同时支持href和preventDefault的解决方案

/* Solution tested with: 
 *
 * - "typescript": "^4.9.5",
 * - "react": "^18.2.0",
 */

function AnchorWithPreventDefault() {
  function handleClick<E extends Element = HTMLAnchorElement>(
    e: React.MouseEvent<E, MouseEvent>
  ) {
    e.preventDefault(); // block navigation to /somewhere-else
    // do stuff
  }
  return (
    <a href="/somewhere-else" onClick={handleClick}>
      Foo
    </a>
  );
}

字符串
请注意，我们现在引用的是React事件和本地Event类型。
我从react-router文档中提取了这个技术：
https://github.com/remix-run/react-router/blob/a0d6c4fe08c7d95e4811bbfa972f529e0a5304d5/packages/react-router-dom/index.tsx#L926
虽然react文档和类型系统将Form事件解释为“可预防的”，但它似乎没有以同样的方式考虑锚，尽管浏览器本身支持防止默认行为，但我猜这是由于href的可选性
如果你不需要通用输入，这里有一个更窄的替代解决方案：

function handleNav(
  e: React.MouseEvent<HTMLAnchorElement, Pick<MouseEvent, 'preventDefault'>>
) {}

型

赞(0）回复(0）举报 2023-08-04

我来回答

如何用reactjs防止默认使用typescript

3条答案

相关问题

热门标签

最新问答