React-places-autocomplete - Wie kann ich den Status für drei Eingaben festlegen, wenn die Autovervollständigung verwendet wird?

Question

Jede PlacesAutoComplete-Komponente muss Eingabeprops haben, die onChange haben, das auf handleChange verweist, aber handleChange nur setstate für address1, da der Status für jede einzelne Adresse aktualisiert wird, wenn jede einzelne Eingabe eine Adresse hat. Also in meinem Beispiel habe ich drei PlacesAutoComplete-Komponenten, und ich möchte, dass der erste für address1, der zweite für address2 und der dritte setstate für address3 setzen. Wie würde ich meinen Code ändern, sodass jeder einzelne PlacesAutoComplete den Status für die entsprechende Adresse1, Adresse2 oder Adresse3 festlegt?

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

Eine Möglichkeit wäre, 3 verschiedene Funktionen zu schreiben, alle 3 verschiedene autocomplete wie

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

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

jedoch zu handhaben, die oben würde man mehr Code hinzufügen und die gleiche Logik wiederholen. Wenn Sie ein Muster verwenden können, können wir eine einzige Funktion für die Logik verwenden. Nehmen wir an, Ihr Zustand wird address1, address2, address3.

Jetzt schreiben wir eine Funktion, die zwei Argumente aufnehmen wird. Einer ist die tatsächliche Autovervollständigte Adresse und der andere ist der Name des Staates.

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

können Sie nun Ihre machen ändern Staatsnamen

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> 
) 
} 

Jetzt würde den jeweiligen Zustand gesetzt, dies zu senden, wenn onChange genannt wird.