React Geosuggest不更新狀態

Question

我試圖做一個天氣應用程序，並使用外部組件'react-geosuggest'。

我的問題是，當我更新輸入（SEE：onChange = {this.onInputChange}）時，該函數不接受我的輸入，也不改變狀態，即我得到未定義。

有趣的是，我已經設置初始值爲紐約，並提交我得到的結果，沒有改變輸入信息，所以問題在於更新輸入信息並將其傳遞給函數handleOnSubmit。

我已閱讀關於該組件的文檔，但無法弄清楚，它具有與簡單相同的值，但某些內容無效。

謝謝！

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

     this.state = {city: 'New York'}; 
    } 

    onInputChange = (e) => { 
     this.setState({city: e.target.value}); 
    } 

     handleOnSubmit = (e) => { 
     e.preventDefault(); 
     this.props.fetchWeather(this.state.city); 
     this.setState({city: ''}); 
     } 

render() { 
    return (
    <div> 
     <form onSubmit={this.handleOnSubmit}> 
      <Geosuggest 
      initialValue={this.state.city} 
      onChange={this.onInputChange} 
      types={['(cities)']} 
      /> 
      <button type="submit">Search</button> 
     </form> 
     </div> 
    </div> 
    ); 
     } 
} 

Answer 1

綁定構造器的情況下，將值設置屬性，渲染並將setState移除爲您在handleOnSubmit事件中執行的空字符串。我擔心這最後一個是它改變輸入時無法工作的原因。

class SearchBar extends Component { 
     constructor(props) { 
      super(props); 
      this.state = {city: 'New York'}; 
      this.onInputChange = this.onInputChange.bind(this); 
     } 

     onInputChange = (city) => { 
      this.setState({city: city}); 
     } 

     handleOnSubmit = (e) => { 
      e.preventDefault(); 
      this.props.fetchWeather(this.state.city); 
     } 

     render() { 
      return (
      <div> 
       <form onSubmit={this.handleOnSubmit}> 
        <Geosuggest 
        initialValue={this.state.city} 
        value={this.state.city} 
        onChange={this.onInputChange} 
        types={['(cities)']} 
       /> 
      <button type="submit">Search</button> 
      </form> 
      </div> 
     </div> 
     ); 
     } 
    } 

Answer 2

改爲使用e.currentTarget.value。有關詳情，請參閱this question。

也試試這個：

onChange={this.onInputChange.bind(this)} 

如果您想更簡潔，你可以這樣寫：

<Geosuggest 
    initialValue={this.state.city} 
    onChange={(e)=> this.setState({city: e.currentTarget.value})} 
    types={['(cities)']} 
    />