CODEWITHSUNDEEP
react-nativereact-component
Sergei Mikhailovskii
Sergei Mikhailovskii

Reputation: 2465

How to get text from custom component's input

I need to get data from custom component to the screen. Firstly I pass the data to this component: 

<SearchInputComponent dataFromParent={this.state.text} />

And here's the code of my component:

class SearchInputComponent extends Component {
  clearText = () => {
    this._textInput.setNativeProps({ text: '' });
  };

  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Input
          ref={component => this._textInput = component}
          placeholder="Enter city"
          value={this.props.dataFromParent}
        />
        <Button
          buttonStyle={{ width: 40, height: 40, backgroundColor: 'red' }}
          onPress={this.clearText}
          icon={(
            <MaterialIcons
              name="delete"
              size={30}
              color="black"
            />
          )}
        />
      </View>
    );
  }
}

export default SearchInputComponent;

As I understand, data is passed from the state and if I change it in component, it changes in state. Or maybe I am wrong? But when I try to enter text to input of this component it clears in moment. And I need to get text after clicking on button (for example like this method in screen): 

onPressSearch = () => {
      Alert.alert(this.state.cityName);
    };

So, can you help me?

UPD

class SearchInputComponent extends Component {
  clearText = () => {
    this._textInput.setNativeProps({ text: '' });
  };

  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Input
          ref={component => this._textInput = component}
          placeholder="Enter city"
          onChangeText={this.props.onInputChange}
          value={this.props.dataFromParent}
        />
        <Button
          buttonStyle={{ width: 40, height: 40, backgroundColor: 'red' }}
          onPress={this.clearText}
          icon={(
            <MaterialIcons
              name="delete"
              size={30}
              color="black"
            />
          )}
        />
      </View>
    );
  }
}

export default SearchInputComponent;

Upvotes: 0

Views: 316

Answers (1)

Heysem Katibi
Heysem Katibi

Reputation: 1906

You should add a new prop to your SearchInputComponent component, Call it for example onInputChange, This prop will accept a function. Then you pass this prop to your <input/> component exactly like you're doing with dataFromParent.

Component:

class SearchInputComponent extends Component {
  ...
  render() {
    return (
      <Input
        onChangeText={this.props.onInputChange}
        ...
      />
      <Button
        onPress={this.props.onClearPress}
        ...
      />
      ...
    );
  }
}

Parent:

<SearchInputComponent
  dataFromParent={this.state.value}
  onInputChange={value => this.setState({ value })}
  onClearPress={() => this.setState({ value: '' })}
/>

Now you can access input value from parent state like this this.state.value.

Edit: It's not recommended to use ref to get or update the value of your <Input /> (I assume you're coming from native Android/iOS development where we acquire a reference from the view and update it directly). Instead you should clear dataFromParent like this this.setState({ value: "" }); and this will automatically clear your <Input />. I updated the code above.

Upvotes: 1

Related Questions