Form.js
What I wish to get out of this form is a link like '/search/inputValue/' so from another component I can extract the parameter. What I get instead is just '/search/' without the input value.
import React from 'react';
import { Link } from 'react-router-dom';
class Form extends React.Component {
state = {
searched: ''
}
onSubmit = (e) => {
const keyword = e.target.elements.keyword.value;
this.setState({ searched: keyword });
}
render(){
return (
<form className="form-inline" onSubmit={this.onSubmit}>
<div className="form-group">
<input type="text" className="form-control" name="keyword" placeholder="Image keyword" />
<Link to={ `/search/${this.state.searched}`}>
<button className="btn btn-primary">Search</button>
</Link>
</div>
</form>
);
}
};
export default Form;
I have noticed that the state updates its value after a second submit with the older input value, so the problem might be from here.
This can be checked by removing the Link tag, preventDefault and console log the input value. The first one is blank and the second one is with the previous input value.
My whole app is sorted, I just need to figure how to submit to a link from an input.
Router.js
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import App from '../App';
import SearchPage from './SearchPage';
const Router = () => (
<BrowserRouter>
<Switch>
<Route path="/" component={App} exact />
<Route path="/search/:keyword" component={SearchPage} />
</Switch>
</BrowserRouter>
);
export default Router;
Basically after finally getting to a computer to help you, I realized one of my first responses was correct.
You needed to:
Since he is not submitting a form actually, this is the correct way to do this. However, if you were submitting form, ditch the dynamic link and use the form action property.
import React from 'react';
import { Link } from 'react-router-dom';
class App extends React.Component {
/** Left some things in here commented out,
incase you start doing form submissions. Instead of a dynamic link.
**/
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
/** If you start submitting forms
this.handleSubmit = this.handleSubmit.bind(this);
**/
}
handleChange(event) {
this.setState({value: event.target.value});
}
/** If you start submitting forms, add onSubmit={this.onSubmit} to form action
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
**/
render() {
return (
<div>
<form className="form-inline">
<div className="form-group">
<input type="text" value={this.state.value} onChange={this.handleChange} className="form-control" name="keyword" placeholder="Image keyword" />
<Link to={`/search/${this.state.value}`}>
<button className="btn btn-primary">Search</button>
</Link>
</div>
</form>
</div>
);
}
}
export default App;
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments