Question

我正在尝试构建类似计算器的东西。

我有一个onPressDigit函数，我称之为可触摸不透明度。

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>
    );
  }
}

现在，我希望当我单击4（即touchableOpacity中文本的值）时，文本4应该成为当前状态值，我明白了

表达式：4

代替

表达式：0。

无法弄清楚它的逻辑...

Answer 1

我会为你做的，还没那么深

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>
    );
  }
}

仅将数字作为参数传递，抱歉，如果它不是要离开工作的最详细的答案，但是我所做的只是向侦听器添加一个参数，然后在onPress上将数字4传递给它。 / p>

Answer 2

由于您使用的是es6，因此不需要构造函数

您需要通过函数参数传递值

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>
            );
          }
        }

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

2 个答案: