React Native - 用于 TextInput 的未定义函数 onPress

Question

我试图在我的应用程序中创建一个递增和递减按钮，然后将数字显示到我的文本输入中，但由于某种原因，文本输入没有显示预期的输出。我不确定我的按钮功能是否缺少部分或我的文本输入。

编辑：我仍然不确定，但我的功能：“_incrementCount”和 “ _decreaseCount ”在我的 console.log 和警报中未定义。

如果没有“ string() ”，我会收到警告。

这是我的代码：

export default class Dishes extends Component {
    constructor(props) {
        super (props)
        this.state = {
            count: 0,
        }
    }
    _incrementCount(index) {
        this.setState({ ['count'+index]: this.state['count'+index] + 1 });
        console.log(this.count);
        alert(this.count);
    }
    _decreaseCount(index) {
        this.setState({ ['count'+index]: this.state['count'+index] - 1 });
        console.log(this.count);
        alert(this.count);
    }
    changeTextHandler(text) {
        this.setState({ ['count'+index]: text });
    };

    _renderItem = ({ item, index }) => {
     return (
        <View>
            <TouchableOpacity
                onPress = {() => this._incrementCount(index)}>
                <Text style = {styles.buttonText}> + </Text>
            </TouchableOpacity>

            <TextInput
                onChangeText={ (text) => this.changeTextHandler(text) }
                value={ this.state.count }
                keyboardType = "numeric"
                placeholder="0"
            />

            <TouchableOpacity
                onPress = {() => this._decreaseCount(index)}>
                <Text style = {styles.buttonText}> - </Text>
            </TouchableOpacity>
        </View>
     )
    }

Answer 1

您做错了很多事情，但我想这就是您所需要的。您可以查看this expo snack to confirm。在深入了解 React Native 之前，您需要学习一些 React 基础知识，there docs 是您入门的好地方

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity
} from 'react-native';

export default class Dishes extends Component {
  state = {
    count: 0,
  };

  _incrementCount = () => {
    this.setState(({ count }) => ({ count: count + 1 }));
  };

  _decreaseCount = () => {
    this.setState(({ count }) => ({ count: count - 1 }));
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._incrementCount}>
          <Text style={styles.buttonText}> + </Text>
        </TouchableOpacity>

        <Text>{this.state.count}</Text>

        <TouchableOpacity onPress={this._decreaseCount}>
          <Text style={styles.buttonText}> - </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
  buttonText: {
    backgroundColor: 'red',
    margin: 5,
    padding: 5,
  },
});