獲取react-geosuggest輸入字段的輸入值

Question

我使用的是react-geosuggest，並且出於某種原因，我在提交表單時未收集Geosuggest輸入字段的值。 Geosuggest輸入字段在輸入字段中包含name=，與我的其他輸入字段的值相同，但值始終爲空。有什麼建議麼。

export default class ContactDetails extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     'name.first': '', 
     'address.fullAddress': '', 
    }; 

    this.handleInputChange = this.handleInputChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleInputChange(event) { 
    const target = event.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const name = target.name; 

    this.setState({ 
     [name]: value 
    }); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 

    var data = { 
     'name.first': this.state['name.first'], 
     'address.fullAddress': this.state['address.fullAddress'], 
    }; 

    console.log("data: ", data); 

    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit} noValidate> 
     <Geosuggest 
      name="address.fullAddress" 
      placeholder="Full address" 
      value={this.state['address.fullAddress']} 
      onChange={this.handleInputChange} 
      initialValue={this.state['address.fullAddress']} 
      location={new google.maps.LatLng(25.2744, 133.7751)} 
      radius="0" 
     /> 

     <input 
      name="name.first" 
      type="text" 
      value={this.state['name.first']} 
      onChange={this.handleInputChange} 
      className={this.state.errors['name.first'] ? "validate invalid" : "validate" } 
     /> 

     <button className="btn waves-effect waves-light" type="submit" name="action"> 
      Save 
     </button> 
     </form> 
    ) 
    } 
} 

Answer 1

的react-geosuggest組件調用其onChange處理程序與輸入的值，而該事件對象。因此，我建議你寫一個單獨的處理程序，它是這樣的：

handleGeosuggestChange(value) { 
    this.setState({ 'address.fullAddress': value }); 
} 

而且在不是該組件使用它：

<Geosuggest 
    ... 
    onChange={this.handleGeosuggestChange} 
    ... 
/>