React Native，onPress 将文本值设置为状态

Question

I am trying to build something like a calculator.

I have a function onPressDigit, which I call in touchable opacity.

class App extends Component {
  state = {
      expression: 0,
    }


  onPressDigit = () => {
    this.setState({
      expression: //logic here
    })
  }

  render() {
    const { expression } = this.state
    return (
      <View>
        <Text>expression: {expression}</Text>
        <TouchableOpacity onPress={this.onPressDigit}>
          <Text style={{ fontSize: 30, backgroundColor: 'purple' }}>4</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Now, I want when I click 4 (that is the value of the text in touchableOpacity) the text 4, should become the current state value and I see

expression: 4

instead

expressions: 0.

Can't figure out the logic for that...

Answer 1

I'll just do it for you lol its not that deep,

class App extends Component {

  constructor(props) {
     super(props);

     this.state = {
      expression: 0,
    }
  }

  onPressDigit = (number) => {
    this.setState({
      expression: number
    })
  }

  render() {
    const { expression } = this.state
    return (
      <View>
        <Text>expression: {expression}</Text>
        <TouchableOpacity onPress={() => this.onPressDigit(4)}>
          <Text style={{ fontSize: 30, backgroundColor: 'purple' }}>4</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

just pass the number as a argument, sorry if its not the most detailed of answers im about to leave work, but all I did was add an argument to the listener, and then passed it the number 4 through on the onPress

Answer 2

Since you are using es6 you do not need a constructor

you need to pass the value through the function parameter

class App extends Component {

        state = {
              expression: 0,
            }


          onPressDigit = (number) => {

    //number is the value you want your expression to have
    //you can use any name different from number

            this.setState({
              expression: number
            })
          }

          render() {
            const { expression } = this.state
            return (
              <View>
                <Text>expression: {expression}</Text>

    {/*create an arrow function that will pass the value of the expression to the function*/}

                <TouchableOpacity onPress={() => this.onPressDigit(4)}>
                  <Text style={{ fontSize: 30, backgroundColor: 'purple' }}>4</Text>
                </TouchableOpacity>
              </View>
            );
          }
        }