反応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} 
    ... 
/>