获取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} 
    ... 
/>