CODEWITHSUNDEEP
react-native
Pete
Pete

Reputation: 658

Passing prop functions with "this" through a custom component to child component

I'm attempting to create a custom TextInput - I don't want to extend the TextInput class directly because I might be working with other libraries in the future. But I do want to pass the onChangeText function from the top-level of my script down through my custom component into the child TextInput

In the following script I've provided a default onChangeText function for my custom component that I would like to pass down to the TextInput. Obviously in this case, the "this" setState is not referring to the TextInput like I want it to. It's referring to my custom component.

And even if I could figure out how to get the default onChangeText to refer to the TextInput object's setState, how would I be able to refer to it when I actually use MyTextInput onChangeText=(text)=>???? at all ?

export class MyTextInput extends React.Component {
    static propTypes = {
        placeholder: PropTypes.string,
        style: PropTypes.object,
        onChangeText: PropTypes.func,
        password: PropTypes.bool,
    }

    static defaultProps = {
        password: false,
        onChangeText: (text) => this.setState({text}),
    }



    render() {

        return (
            <TextInput
                style={[styles.textinput, this.props.styles]}
                placeholder={this.props.placeholder}
                placeholderTextColor={colors.text}
                secureTextEntry={this.props.password}
                onChangeText={this.props.onChangeText}
              />
        );
    }
}

You see obviously the onChangeText in defaultProps has a "this" in it, referring to my component when that function to refer to the TextInput

What do you guys think is the best way to go about this?

Thanks!

Upvotes: 0

Views: 489

Answers (1)

Jeff Gu Kang
Jeff Gu Kang

Reputation: 4879

Solution

You want to extend onChangeText to use parent components without change original acting. Thus, link method for the onChangeText property as below.

export class MyTextInput extends React.Component {
    state = {
      value: '',
    }
    
    static propTypes = {
        placeholder: PropTypes.string,
        style: PropTypes.object,
        onChangeText: PropTypes.func,
        password: PropTypes.bool,
    }

    static defaultProps = {
        password: false,
    }
    
    onChangeText = (value) => {
      this.setState({ value });
      this.props.onChangeText?.(); // Same as this.props.onChangeText && this.props.onChangeText()
    }

    render() {
        return (
            <TextInput
                style={[styles.textinput, this.props.styles]}
                placeholder={this.props.placeholder}
                placeholderTextColor={colors.text}
                secureTextEntry={this.props.password}
                value={this.state.value}
                onChangeText={this.onChangeText}
              />
        );
    }
}

Upvotes: 1

Related Questions