React-places-autocomplete - Comment puis-je définir l'état de trois entrées lors de l'utilisation automatique?

Question

Chaque composant PlacesAutoComplete doit avoir des inputprops, dont onChange pointe vers handleChange mais handleChange uniquement setstate for address1, parce que la mise à jour de l'état pour chaque adresse individuelle est impossible lorsque chaque entrée a une adresse. Donc, dans mon exemple, j'ai trois composants PlacesAutoComplete et je veux le premier à setstate pour address1, le second à setstate pour address2 et le troisième à setstate pour address3. Comment est-ce que je changerais mon code de sorte que chaque PlacesAutoComplete individuel établisse l'état pour l'address1, l'address2 ou l'address3 correspondants?

class AutoCompleteForm extends React.Component { 
constructor() { 
    super() 
    this.state = { 
    address1: '', 
    address2: '', 
    address3: '' 
} 
} 


handleChange = (address) => { 
    this.setState({ 
     address1: address, 
    }) 
    } 

render() { 
    const inputProps = { 
    value: this.state.address, 
    onChange: this.handleChange, 
    placeholder: "Enter a location" 
    } 

    return (
    <form onSubmit={this.handleFormSubmit}> 
     <PlacesAutocomplete inputProps={inputProps} /> 
     <PlacesAutocomplete inputProps={inputProps} /> 
     <PlacesAutocomplete inputProps={inputProps} /> 
     <button type="submit">Find Midpoint</button> 
    </form> 
) 
} 
} 

export default AutoCompleteForm 

Answer 1

Une façon serait d'écrire 3 fonctions différentes pour gérer les 3 différents autocomplete comme

handleChange1 = (address) => { 
    this.setState({ 
    address1: address, 
    }) 
} 

handleChange2 = (address) => { 
    this.setState({ 
    address3: address, 
    }) 
} 

Cependant, celui ci-dessus ajouterait plus de code et répéter la même logique. Si vous pouvez utiliser un motif, nous pouvons utiliser une seule fonction pour faire la logique. Supposons que votre état sera address1, address2, address3.

Maintenant, écrivez une fonction qui prendra deux arguments. L'un est l'adresse réelle autocompleted et l'autre est le nom d'état.

handleAddressChange = (address, stateName) => { 
    this.setState({ 
    [stateName]: address, 
    }); 
} 

Modifions maintenant votre rendu pour envoyer le nom de l'état

render() { 
    const inputProps = { 
    value: this.state.address, 
    placeholder: "Enter a location" 
    } 

    return (
    <form onSubmit={this.handleFormSubmit}> 
     <PlacesAutocomplete inputProps={inputProps} onChange={(address) => {this.handleAddressChange(address, 'address1')}} /> 
     <PlacesAutocomplete inputProps={inputProps} onChange={(address) => {this.handleAddressChange(address, 'address2')}} /> 
     <PlacesAutocomplete inputProps={inputProps} onChange={(address) => {this.handleAddressChange(address, 'address3')}} /> 
     <button type="submit">Find Midpoint</button> 
    </form> 
) 
} 

Maintenant, cela fixerait l'état respectif lorsque onChange est appelé.