CODEWITHSUNDEEP
javascriptreact-native
jamesvphan
jamesvphan

Reputation: 1975

React Native - Updating state upon pressing a button

I currently have two buttons (No, Yes)( component imported from native-base package) that when pressed should update the state with either 0 or 1 respectively and also toggle between true or false to notify if this field has been filled (by default, neither of the two will be pressed, hence set to false).

I have a handleOnClick() function bound to the "No" button with a debugger to test if I actually do hit it, but once inside this function, I'm not sure how to grab any info for associated components (i.e. the "No" text within the Text component) so I can perform logic to check if "No" or "Yes" was pressed.

If this was done in pure React, I know I can access certain data attributes that I add to DOM elements or traverse the DOM, but I'm not sure how to do this in React Native or if I'm able to add custom props to a built in component that I can then access.

class Toggle extends Component {
  constructor() {
    super()

    this.state = {
      selectedOption: '',
      isFilled: false
    }

    this.checkField = this.checkField.bind(this)
    this.handleOnClick = this.handleOnClick.bind(this)
  }

  checkField() {
    console.log(this)
    // debugger
  }

  handleOnClick(ev) {
    debugger
    console.log("I was pressed")
  }

  render() {
    const options = this.props.inputInfo.options //=> [0,1]
    const optionLabels = this.props.inputInfo.options_labels_en //=>["No","Yes"]

    return (
      <View style={{flexDirection: 'row'}}>
        <View style={styles.row} >
          <Button light full onPress={this.handleOnClick}><Text>No</Text></Button>
        </View>
        <View style={styles.row} >
          <Button success full><Text>Yes</Text></Button>
        </View>
      </View>
    )
  }
}

Upvotes: 0

Views: 2003

Answers (2)

Stephen L
Stephen L

Reputation: 2339

Have you tried:

render() {
    const options = this.props.inputInfo.options //=> [0,1]
    const optionLabels = this.props.inputInfo.options_labels_en //=>["No","Yes"]

return (
  <View style={{flexDirection: 'row'}}>
    <View style={styles.row} >
      <Button light full onPress={() => this.handleOnClick('No')}><Text>No</Text></Button>
    </View>
    <View style={styles.row} >
      <Button success full onPress={() => this.handleOnClick('Yes')}><Text>Yes</Text></Button>
    </View>
  </View>
)

}

and

  handleOnClick(word) {
    this.setState({ selectedOption: word, isFilled: true })
  }

Upvotes: 1

magneticz
magneticz

Reputation: 2430

If you want to pass information into function, you can pass it when it is called. In your case, you can call your function from arrow function, like so:

      <View style={{flexDirection: 'row'}}>
        <View style={styles.row} >
          <Button light full onPress={() => this.handleOnClick('No')}>
            <Text>No</Text>
          </Button>
        </View>
        <View style={styles.row} >
          <Button success full><Text>Yes</Text></Button>
        </View>
      </View>

And in your function 

  handleOnClick(text) {
    debugger
    console.log(`${text} pressed`)
  }

Upvotes: 1

Related Questions