I can’t edit Input content that returns address

Asked

Viewed 270 times

0

Through this code I receive the current address of the device:

navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        }, () => this.getGeocode());
      },
       (error) => this.setState({ error: error.message }),
       { enableHighAccuracy: true, timeout: 20000 },
     );

    }
    // Retorna o endereço a partir da geolocalização
    getGeocode() {
     axios.get('https://maps.googleapis.com/maps/api/geocode/json?address='+ this.state.latitude +','+ this.state.longitude +'&key=__API_KEY__')
    .then(response => {
      console.log(response);
        this.setState({
            place: response.data.results[0].formatted_address
        })
     }).catch((error) => {
       this.setState({ error: error.message })
     });
  }

And print the address in this field:

<Item floatingLabel>
  <Label style={{ color: branco }}>Local da ocorrência</Label>
  <Input multiline={true} numberOfLines={2} value={this.state.place.toString()} />
</Item>

So far so good, though i wish that if the user wanted this could delete the address and enter with another, but nowadays, if you try to erase it, it fills up again.

I thought about putting a button there, like "Enter with different address", but there would be no way to simply call once the address, and it is possible to edit this?

  • 1

    (1) Where do the Item, Label, Input components come from? (2) The input component has value set by state, this.state.place.toString() and it will always be that every time render for call. Usually, text fields are controlled and have an onChangeText prop that updates the status with the new typed data.

  • @nbkhope vlw, I did some research on the onChangeText and I did so: onChangeText={(place) => this.setState({place})}

1 answer

1


Duplicate of Open field with value set, but can be edited

Add the prop onChangeText to Input to update the state of the component with a new value to place.

<Input onChangeText={(text) => this.setState({ place: text })} />

(Other Input properties omitted)

  • We stayed so long away from the project that I didn’t even remember that I had already questioned here, but I’m glad that this time I got an answer, and thank you again by the way

Browser other questions tagged

You are not signed in. Login or sign up in order to post.