给Button/input添加链接,前进,后退等功能

1.链接到某页
<input type="button" name="Submit" value="确 定" class="btn" οnclick="location.href='http://www.veryhuo.com/down'" />

2.返回(等同后退)
<input name="Submit2" type="button" class="btn" οnclick="location.href='javascript:history.go(-1);'" value="返 回" />

3.打开新网页
<input type="button" name="Submit2" value="确 定" class="btn" οnclick="window.open('filename.html')" />

4.打开无边框的新窗口
<input type="button" name="Submit2" value="确 定" class="btn" οnclick="javascript:window.open('http://bbs.liehuo.net','','width=720,height=500,resizable=yes,scrollbars=yes,status=no')" />

5.打开新网页同时指向另一页
<input type="button" name="Submit2" value="确 定" class="btn" οnclick="window.open('filename.html');location.href='http://www.liehuo.org'" />

6.打开无边框的新窗口同时指向另一页
<input type="button" name="Submit2" value="确 定" class="btn" οnclick="javascript:window.open('http://www.liehuo.org','','width=720,height=500,resizable=yes,scrollbars=yes,status=no'); window.location='filename.html';" />

7.点击按钮弹出确认alert窗口
方式一:
<input type="button" name="Submit1" value="确定" class="btn"
onClick="alert('Liehuo_net提示:提交成功!');location.href= 'filename.html';return false;" >
方式二:
<input type="button" name="Submit2" value="确定" class="btn"
onClick="if (confirm('烈火学院提示:是否确认提交?'))location.href= 'filename.html';return false;" >
好的,下面是一个使用 React Router 的 `history` 对象实现表单筛选状态在页面变化时的保持的示例代码: ```jsx import React, { useState, useEffect } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; const Form = () => { const [filter, setFilter] = useState(''); const history = useHistory(); const location = useLocation(); // 当 location.state 发生改变时更新表单筛选状态 useEffect(() => { if (location.state && location.state.filter) { setFilter(location.state.filter); } }, [location.state]); // 处理表单提交事件 const handleSubmit = (event) => { event.preventDefault(); // 在提交表单时将筛选状态存储到 location.state 中 history.push({ pathname: '/results', state: { filter } }); }; // 处理表单输入事件 const handleInputChange = (event) => { setFilter(event.target.value); }; return ( <form onSubmit={handleSubmit}> <label htmlFor="filter">Filter:</label> <input type="text" id="filter" value={filter} onChange={handleInputChange} /> <button type="submit">Submit</button> </form> ); }; const Results = () => { const location = useLocation(); return ( <div> <h2>Results</h2> <p>Filter: {location.state && location.state.filter}</p> </div> ); }; const App = () => { return ( <div> <nav> <ul> <li> <a href="/">Home</a> </li> <li> <a href="/form">Form</a> </li> </ul> </nav> <Switch> <Route path="/form"> <Form /> </Route> <Route path="/results"> <Results /> </Route> <Route path="/"> <h2>Home</h2> </Route> </Switch> </div> ); }; ``` 在这个示例代码中,我们使用了 `useHistory` 和 `useLocation` hooks 获取了 React Router 的 `history` 对象和 `location` 对象,然后在表单提交时将筛选状态存储到 `location.state` 中,这样在页面变化时 `location.state` 将被保留,我们就可以在 `Results` 组件中获取 `location.state` 中的筛选状态并展示了。同时,我们还使用了 `useEffect` hook 监听 `location.state` 的变化,当 `location.state` 发生变化时更新表单的筛选状态。 需要注意的是,使用 `history` 对象存储筛选状态的方式并不是最佳实践,因为 `location.state` 对象只在内存中存在,当用户刷新页面或者直接在浏览器地址栏中输入 URL 时,`location.state` 对象会丢失。更好的方式是将筛选状态存储到 URL 中,例如使用查询参数 `?filter=xxx`,这样即使用户刷新页面或者直接在浏览器地址栏中输入 URL,筛选状态也能被正确地恢复。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值