Question

我有一个具有TextInput和2个按钮的组件。 1个按钮增量，另一个减少。我在TextInput上有一个onChange和value，当单击按钮时，值会更改（输入中的文本增加或减少），但是通过TextInput键入值，它不起作用。它不允许输入任何内容。单击增量/减量按钮后，退格键甚至不起作用。以为我会把我的代码放在这里，看看是否有人可以指出我错过了什么。我认为它与值.toString()有关，因为当我删除它时，我能够输入TextInput，但我需要.toString()那里为了做数字并拥有初始值为null。

这是父组件：

  measurementValue = (measurement) => {
    this.setState({ measurement });
  }

  updateMeasurement = () => {
    this.measurementValue(this.state.measurement);
  }

  decrement = () => {
    this.measurementValue(this.state.measurement - 1);
  }

  increment = () => {
    this.measurementValue(this.state.measurement + 1);
  }

  render() {
    return (
      <View>
        <MeasurementControl
          updateMeasurement={this.updateMeasurement}
          decrement={this.decrement}
          increment={this.increment}
          measurement={this.state.measurement}
        />
      </View>
    );
  }
}

这是子组件：

export class MeasurementControl extends Component {

  render() {
    const {
      updateMeasurement,
      decrement,
      increment,
      measurement,
    } = this.props;
    const styles = getStyles();

    const value = measurement === null
    ? ''
    : measurement;

    return (
      <View style={styles.container}>
        <View style={styles.input}>
          <TextInput
            style={styles.inputText}
            keyboardType='numeric'
            placeholder='Enter #'
            onChangeText={updateMeasurement}
            value={value.toString()}
          />
        </View>
        <View style={styles.buttonWrapper}>
          <Button
            buttonStyles={styles.decrementButton}
            textStyles={styles.decrementButtonText}
            onPress={decrement}
          >
            __
          </Button>
          <Button
            buttonStyles={styles.incrementButton}
            textStyles={styles.buttonText}
            onPress={increment}
          >
            +
          </Button>
        </View>
      </View>
    );
  }
}

Answer 1

您的TextInput拥有名为onChangeText的属性，每次您写入输入时都会触发此事件

结帐我的代码

<TextInput
    style={styles.inputText}
    keyboardType='numeric'
    placeholder='Enter #'
    onChangeText={(text) => {

        if(text === ""){
            updateMeasurement(null);
            return;
        }

        if(isNaN(text))    //this will allow only number
            return;
        updateMeasurement(parseInt(text))}
    }
    value={value.toString()}
/>

updateMeasurement = (value) => {
    this.measurementValue(value);
}

Answer 2

您缺少的部分是更新更改时的值

onChangeText={(text) => updateMeasurement(text)}


updateMeasurement = (text) => {
    this.measurementValue(text);
  }

React Native TextInput不允许输入/文本更改

2 个答案: