Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 'use strict';
- function MySelect(props) {
- const [selectValue, setSelectValue] = React.useState(props.initialValue);
- // push browser history
- React.useEffect(() => {
- console.log("pushState: "+selectValue);
- history.pushState({"a":selectValue, "b": 2}, "", "?a="+selectValue+"&b=2");
- }, [selectValue]);
- // subscribe to popstate
- React.useEffect(() => {
- const handlePopState = () => {
- console.log("handlePopState, history.state.a: "+history.state.a);
- setSelectValue(history.state.a);
- }
- window.addEventListener("popstate", handlePopState);
- return () => {
- window.removeEventListener("popstate", handlePopState);
- }
- });
- function handleSelectChange(event) {
- setSelectValue(event.target.value);
- }
- return (
- <React.Fragment>
- <select value={selectValue} onChange={handleSelectChange}>
- {
- props.options.map((option) => (
- <option key={option.value} value={option.value}>{option.display}</option>
- ))
- }
- </select>
- <br/>
- select value is: {selectValue}
- </React.Fragment>
- );
- }
- const domContainer = document.querySelector('#MySelect');
- const options = window._selectOptions;
- const initialValue = window._selectInitialValue;
- ReactDOM.render(<MySelect options={options} initialValue={initialValue}/>, domContainer);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement