Javascript ReactJS/Django如何将搜索字符串编码到onClick按钮以重定向到准确的URL？

这里是ReactJS和Django的Noob。 我必须为一个学校项目建模一个网站，我们使用ReactJS作为前端，Django作为后端。该应用程序目前运行正常，但我遇到了一个问题，无法将我的搜索按钮重定向到我需要的确切搜索页面

下面是我想要做的：

用户在搜索栏中键入字符串。例如，输入：hello

用户按下搜索按钮

SearchButton会将用户重定向到此确切路径/url：

目前，我所拥有的是：

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/search/?q=hello

因为onClick不接受参数“name”中的特殊字符，即字符：//=

所以，我的问题是，有没有一种方法可以对这个“name”参数进行编码，比如stringify（）或EncodeUIC（）或者其他更简单的方法将SearchButton重定向到确切的url

---

提前感谢您对uri字符串进行编码和解码

：

encodeURIComponent(url)
decodeURIComponent(url)

---

希望这会有所帮助。

我认为您首先必须阅读并了解react是如何工作的，这样才能获得更好的结果，而不会遇到此类问题

首先，我不认为这是可以的，您是否有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是类组件搜索栏的方法

在下面，您可以通过react方式找到组件及其功能的示例

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>
    );
  }

}

类搜索栏扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索：“”，
url:“”，
重定向：false
}
//将上下文绑定到搜索栏
//因为这些函数将在
//不同语境
this.handleChange=this.handleChange.bind（this）；
this.handleSearch=this.handleSearch.bind（this）；
}
//修改组件状态的搜索键
手变（e）{
这是我的国家({
搜索：e.target.value
});
}
//获取用户输入
//并在此基础上构建url
handleSearch（e）{
e、 preventDefault（）；//防止重新加载页面
const{search}=this.state；
const url=`your_url/search/？q=${encodeURIComponent（search）}`；
console.log（url）
//你想做什么？
//如果根据url获取数据
//然后使用fetch调用http
//并更新组件的状态
//使用setState方法
//如果重定向（假设您有SPA并使用react路由器dom）
//使用
//这是我的国家({
//网址，
//重定向：true
// });
//这将迫使您的组件重新加载
}
渲染（）{
const{search，url，redirect}=this.state；
//如果您使用的是react路由器dom，只需
//呈现重定向组件
//如果（重定向）{
//返回
// }
//
返回(
搜索
);
}
}

非常感谢您的回答。我确实是个新手，我在另一个版本上也有类似的东西，但我无法让它工作。我使用了你的代码，它实际运行了。但是，当我在搜索栏中键入并按下SearchButton时，它不会重定向到任何url。页面不会呈现/更改，当我按下它时，它会变为空白（白色页面），同时保持与以前相同的URL。你知道为什么吗？我也将路由添加到了我的App.js文件中。没问题，但我不知道你的代码是什么样子，我给了你一个问题的答案检查你的浏览器控制台是否有错误，这通常有助于找出错误。你能快速浏览我的代码吗？它在我的GitHub上可用。SearchBar组件在这里：App.js在这里：您忘记从react router dom导入重定向组件。使用导入{withRouter，从“react router dom”重定向}而不是从“react router dom”导入{withRouter}

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>
    );
  }

}