Update-URL mit Wert von Eingabe beim Klicken mit Reagieren

Question

Ich versuche, den Wert einer Eingabe zu erfassen und dann Teil der URL mit diesem Wert zu aktualisieren, alles durch einen einfachen Klick mit React, ES6 usw. Im Grunde eine einfache Suchfunktion

So etwas wie dies meine Komponente aussieht:

class SearchInput extends Component { 
    constructor() { 
    super() 

    this.state = { 
     query: '' 
    } 
    } 

    componentDidMount =() => { 
    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> 
    ) 
    } 
} 

aber das gibt mir nur eine Menge Fehler und es scheint window.location nicht mögen. Was ist der beste Weg, dies zu erreichen? Ich benutze react-router, also bin ich auch froh, wenn es einen besseren Weg damit gibt

Answer 1

Sie können browserHistory.push oder verwenden. Auch componentDidMount ist eine LifeCycle-Funktion und benötigt keine Bindung und wird nur einmal ausgeführt. Sie müssen auch eine handleSearch Funktion und ein onChange Ereignis auf Eingabeabfrage Änderung

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

Answer 2

Sie "browserHistory" von 'react-router' verwenden können und dann neue URL schieben wie diese hier:

browserHistory.push('/search/{this.state.query}/some-action')