javascript - Pass function from HOC to component (React, React native) - Stack Overflow

admin管理员组

文章数量:1313739

I am a beginner regarding Facebooks ReactJS and React-native, so I started coding with help of a tutorial, showing how to share code between Android and iOS.

Later in this tutorial a button is implemented, which toggles a state. Unfortunately this is made with a mixin. I want to do it with an HOC-ponent.

Original mixin

export default {
  getInitialState() {
    return {
      pressed: false
    }
  },

  handlePress() {
    this.setState({pressed: !this.state.pressed});
  }
}

Original call of above mixin

{ ...
  render() {
    const buttonStyle = [styles.button];
    if (this.state.pressed) buttonStyle.push(styles.buttonPress);
    return (
      <TouchableOpacity onPress={this.handlePress.bind(this)} style={buttonStyle}>
        <Text style={styles.text}>{this.props.text}</Text>
      </TouchableOpacity>
    )
  }
}

reactMixin.onClass(Button, ButtonCommon);
export default Button;

My HOC

export var ButtonComp = (ComposedComponent) => class extends Component {
  constructor(props) {
    super(props);
    this.state = {pressed: false};
  }

  handlePress() {
    this.setState({pressed: !this.state.pressed});
  }

  render() {
    return <ComposedComponent {...this.props} data={this.state.pressed} />;
  }
};

My HOC usage

import { ButtonComp } from './buttonmon';

class Button extends Component {
  render() {
    const buttonStyle = [styles.button];
    if (this.props.data) buttonStyle.push(styles.buttonPress);

    return (
      <TouchableOpacity onPress={this.handlePress.bind(this)} style={buttonStyle}>
        <Text style={styles.text}>{this.props.text}</Text>
      </TouchableOpacity>
    )
  }
}

export default ButtonComp(Button); // Enhanced ponent

When I execute above code, I get the following error (when the call of this.handle happens, so in the TouchableOpacity tag):

undefined is not an object (evaluating 'this.handlePress.bind')

So what am I doing wrong? Are HOC only to pass data, not functions? Thanks for the help!

I am a beginner regarding Facebooks ReactJS and React-native, so I started coding with help of a tutorial, showing how to share code between Android and iOS.

Later in this tutorial a button is implemented, which toggles a state. Unfortunately this is made with a mixin. I want to do it with an HOC-ponent.

Original mixin

export default {
  getInitialState() {
    return {
      pressed: false
    }
  },

  handlePress() {
    this.setState({pressed: !this.state.pressed});
  }
}

Original call of above mixin

{ ...
  render() {
    const buttonStyle = [styles.button];
    if (this.state.pressed) buttonStyle.push(styles.buttonPress);
    return (
      <TouchableOpacity onPress={this.handlePress.bind(this)} style={buttonStyle}>
        <Text style={styles.text}>{this.props.text}</Text>
      </TouchableOpacity>
    )
  }
}

reactMixin.onClass(Button, ButtonCommon);
export default Button;

My HOC

export var ButtonComp = (ComposedComponent) => class extends Component {
  constructor(props) {
    super(props);
    this.state = {pressed: false};
  }

  handlePress() {
    this.setState({pressed: !this.state.pressed});
  }

  render() {
    return <ComposedComponent {...this.props} data={this.state.pressed} />;
  }
};

My HOC usage

import { ButtonComp } from './button.mon';

class Button extends Component {
  render() {
    const buttonStyle = [styles.button];
    if (this.props.data) buttonStyle.push(styles.buttonPress);

    return (
      <TouchableOpacity onPress={this.handlePress.bind(this)} style={buttonStyle}>
        <Text style={styles.text}>{this.props.text}</Text>
      </TouchableOpacity>
    )
  }
}

export default ButtonComp(Button); // Enhanced ponent

When I execute above code, I get the following error (when the call of this.handle happens, so in the TouchableOpacity tag):

undefined is not an object (evaluating 'this.handlePress.bind')

So what am I doing wrong? Are HOC only to pass data, not functions? Thanks for the help!

• javascript
• android
• ios
• reactjs
• react-native

Share Improve this question Follow edited Oct 21, 2016 at 6:09 bytepool asked Oct 19, 2016 at 10:44 bytepoolbytepool 8511 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

HOC cannot do that. Yet, in case you want a function from HOC available in the wrapped ponent to be called there through this, you must pass it through props:

    export var ButtonComp = (ComposedComponent) => class extends Component {
        constructor(props) {
            super(props);
            this.state = {pressed: false};
            this.handlePress = this.handlePress.bind(this);
        }

        handlePress() {
            this.setState({pressed: !this.state.pressed});
        }

        render() {
            return <ComposedComponent {...this.props} handlePress={this.handlePress} data={this.state.pressed} />;
        }
    };

    class Button extends Component {
        render() {
            const buttonStyle = [styles.button];
            if (this.pressed) buttonStyle.push(styles.buttonPress);

            return (
                <TouchableOpacity onPress={this.props.handlePress} style={buttonStyle}>
                    <Text style={styles.text}>{this.props.text}</Text>
                </TouchableOpacity>
            )
        }
    }

本文标签： javascriptPass function from HOC to component (ReactReact native)Stack Overflow