这里的ReactJS和Django中的Noob。
我必须为一个学校项目建模一个网站，并且我们将ReactJS用于前端，将Django用于后端。该应用程序当前运行良好，但是在将“搜索按钮”重定向到所需的确切搜索页面时遇到了问题。
这是我要确切执行的操作：
用户在SearchBar中输入字符串。例如，键入：hello。
用户按下搜索按钮。
SearchButton会将用户重定向到此确切路径/ URL：
http://127.0.0.1:8000/search/?q=hello
目前，这是我所拥有的：
export class SearchBar extends React.Component {
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" placeholder="Search questions here"
id="query" name="/search/?q="/>
<input type="submit" value="Search"
onclick="onLoadConfigPress(document.getElementById(name).value)" />
</form>
);
}
}
这使我重定向到的是：
http://127.0.0.1:8000/?%2Fsearch%2F%3Fq%3D=ss
显然，这不等于：
http://127.0.0.1:8000/search/?q=hello
因为onClick不接受参数“名称”中的特殊字符，所以这些字符为：/ /？ =
所以，我的问题是，是否有一种方法可以对这个“名称”参数进行编码，例如stringify（）或EncodeUIC（），还是将SearchButton重定向到确切网址的另一种简便方法？
先感谢您
最佳答案
我相信您首先必须阅读并学习反应的工作原理，这样您才能获得更好的结果，而不会遇到此类问题
首先，我认为这不行，您是否具有onLoadConfigPress函数和全局名称变量？他们来自哪里？
<form onSubmit={this.handleSubmit}>
<input type="text" placeholder="Search questions here"
id="query" name="/search/?q="/>
<input type="submit" value="Search"
onclick="onLoadConfigPress(document.getElementById(name).value)" />
</form>
您可以将其重构为
<form onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Search questions here"
onChange={this.handleChange}
/>
<input type="submit" value="Search" />
</form>
其中handleSubmit和handleChange是类Component SearchBar的方法
您可以在下面找到反应方式的组件及其功能的示例
class SearchBar extends React.Component {
constructor (props) {
super(props);
this.state = {
search : '',
url : '',
redirect : false
}
// binding the context to the SearchBar
// because this functions will be executed in a
// different context
this.handleChange = this.handleChange.bind(this);
this.handleSearch = this.handleSearch.bind(this);
}
// Modify the search key of the component state
handleChange (e) {
this.setState({
search : e.target.value
});
}
// gets the user input
// and build the url based on it
handleSearch (e) {
e.preventDefault(); // prevent page reload
const { search } = this.state;
const url = `your_url/search/?q=${encodeURIComponent(search)}`;
console.log(url)
// What do you want to do?
// if fetch data based on the url
// then make an http called using fetch
// and update the state of your component
// using setState method
// if redirect (assuming your have a SPA and using react router dom)
// use
// this.setState({
// url,
// redirect : true
// });
// that will force your component to rerender
}
render () {
const { search, url, redirect } = this.state;
// if you are using react-router-dom just
// render a Redirect Component
// if (redirect) {
// return <Redirect to={url} />
// }
//
return (
<form onSubmit={this.handleSearch}>
<input
value={search}
onChange={this.handleChange}/>
<button type="submit">Search</button>
</form>
);
}
}