I'm trying to get the value of an input to be captured and then to update part of the URL with that value, all by doing a simple on click with React, ES6 etc. Basically a simple search functionality
So my ponent looks something like this:
class SearchInput extends Component {
constructor() {
super()
this.state = {
query: ''
}
}
ponentDidMount = () => {
const handleSearchURL = window.location('/search/'+this.state.query+'/some-action')
this.setState({
handleSearch: handleSearchURL
})
}
queryChange = (evt) => {
this.setState({query: evt.target.value})
}
render() {
const { handleSearch, placeholder } = this.props
return (
<form>
<input id="site-search" type="search" placeholder={placeholder} value={this.state.query} />
<input type="submit" value="Search" onClick={this.handleSearch} />
</form>
)
}
}
but this just gives me a lot of errors and it seems to don't like window.location. What's the best way to achieve this? I'm using react-router so I'm also happy if there is a better way with that
I'm trying to get the value of an input to be captured and then to update part of the URL with that value, all by doing a simple on click with React, ES6 etc. Basically a simple search functionality
So my ponent looks something like this:
class SearchInput extends Component {
constructor() {
super()
this.state = {
query: ''
}
}
ponentDidMount = () => {
const handleSearchURL = window.location('/search/'+this.state.query+'/some-action')
this.setState({
handleSearch: handleSearchURL
})
}
queryChange = (evt) => {
this.setState({query: evt.target.value})
}
render() {
const { handleSearch, placeholder } = this.props
return (
<form>
<input id="site-search" type="search" placeholder={placeholder} value={this.state.query} />
<input type="submit" value="Search" onClick={this.handleSearch} />
</form>
)
}
}
but this just gives me a lot of errors and it seems to don't like window.location. What's the best way to achieve this? I'm using react-router so I'm also happy if there is a better way with that
Share Improve this question asked Mar 16, 2017 at 8:44 ynterynter 2861 gold badge5 silver badges16 bronze badges4 Answers
Reset to default 2You can use "browserHistory" from 'react-router' and then push new url to here like this:
browserHistory.push('/search/{this.state.query}/some-action')
You can use browserHistory.push or this.context.router.push. also ponentDidMount is a lifeCycle function and doesnt require binding and is executed just once. You also need a handleSearch function and a onChange event on input query change
class SearchInput extends Component {
constructor() {
super()
this.state = {
query: ''
}
}
static contextTypes = {
router: React.PropTypes.object
}
handleSearch = () => {
this.context.router.push(`'/search/${this.state.query}/some-action'`);
}
queryChange = (evt) => {
this.setState({query: evt.target.value})
}
render() {
const { handleSearch, placeholder } = this.props
return (
<form>
<input id="site-search" type="search" placeholder={placeholder} value={this.state.query} onChange={this.queryChange} />
<input type="submit" value="Search" onClick={this.handleSearch} />
</form>
)
}
}This worked for me with react-hooks and react-router v5
import { useHistory } from 'react-router-dom';
const history = useHistory();
const handleSubmit = (e) => {
e.preventDefault();
history.push(`/search/${input}`);
};
see https://reactrouter./web/api/Hooks
function updateQueryStringParam(key, value, location) {
const urlQueryString = location.search;
const newParam = ${key}=${value};
let params = ?${newParam};
// If the "search" string exists, then build params from it
if (urlQueryString) {
const updateRegex = new RegExp(([?&])${key}[^&]*);
const removeRegex = new RegExp(([?&])${key}=[^&;]+[&;]?);
if (typeof value === 'undefined' || value == null || value === '') {
// Remove param if value is empty
params = urlQueryString.replace(removeRegex, '$1');
params = params.replace(/[&;]$/, '');
} else if (urlQueryString.match(updateRegex) !== null) {
// If param exists already, update it
params = urlQueryString.replace(updateRegex, `$1${newParam}`);
} else {
// Otherwise, add it to end of query string
params = `${urlQueryString}&${newParam}`;
}
}
// no parameter was set so we don't need the question mark return (params = params === '?' ? '' : params); }
const url = updateQueryStringParam('filter', inputValue, this.props.location);
this.props.history.push(url);