Open field with value set, but can be edited

Asked

Viewed 731 times

0

I’m using the floatingLabel of Nativebase:

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

This receives the address from the API and is already filled in, but if the user tries to edit it cannot.

I tried to use the defaulValue which, as described in documentation of TextInput:

Provides an initial value that will change when the user Starts Typing. Useful for simple use-cases Where you do not want to Deal with Listening to Events and updating the value prop to Keep the Controlled state in Sync.

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

But this one didn’t work, it just doesn’t show any value when loading.

Any idea how I can do this?

react-native

1 answer

1


When the render method is called, the input value comes from the state this.state.place. The input will only change text if the state is changed. Then you have to use prop onChangeText={(text) => this.setState({ place: text })} to change the state and make the render() be called again with the new value of this.state.place.

According to the documentation the Nativebase Input comes from Textinput from React Native, so you should be able to receive the onChangeText prop.

Ref https://docs.nativebase.io/Components.html#Form

Input is a Nativebase Component built on top of React Native’s Textinput

Browser other questions tagged react-native

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