javascriptreactjsreact-360

How to run two functions with VRbutton using React360?


Im very new react and getting the hang of the ropes. The current issue is that I have two functions that seemingly cannot be used at the same time using the Vrbutton (or any button) using onClick.

I have tried many different methods (shown with my commented out bits of code below) to have multiple functions run with onClick. I either get a "functionName not defined" error or it simply does not do anything to the output.


  _incrementCount = () => {
    this.setState({count: this.state.count + 1});
  };
  _setter = () => {
    this.setState({set: !this.state.set});
  }

  // clicker = () => {
  //   this._incrementCount;
  //   this._setter;
  // }

  render() {
    let btn_class = this.state.set ? styles.colorSet : styles.colorUnset;
    return (
      <View style={styles.panel}>
        <VrButton /*onClick={this._incrementCount}*/ /*onClick={this._setter}*/ /*onClick={this.clicker}*/ /*onClick={function(event){this._setter; this._incrementCount}}*/ style={btn_class} >
        <View style={styles.greetingBox}>
          <Text style={styles.greeting}>
            360 Model Viewer 
            {` Count: ${this.state.count}`}
          </Text>
        </View>
        </VrButton>
      </View>
    );
  }
};

All I simply expect to happen is that upon clicking the button, the two functions, _incrementCount and _setter do what they need to do, I've tested and there is nothing wrong with them, simply getting the button working seems to be the issue here. I'm pretty new to this so please feel free to point everything that I'm doing wrong here out!


Solution

  • You can simply create an anonymous function and call your desired function using that function like,

    <VrButton onClick={() => {this._incrementCount(); this._setter();}} style={btn_class} >
    

    Or

    <VrButton onClick={this.clicker} style={btn_class} >
    

    And clicker function should be,

    clicker = () => {
      this._incrementCount();  //You forgot to invoke the function
      this._setter();
    }