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

Question

我有一个具有 TextInput 和 2 个按钮的组件。 1 个按钮递增，其他递减。我在 TextInput 上有一个 onChange 和 value，当单击按钮时，值会发生变化（输入中的文本增加或减少），但是通过 TextInput 输入值，它不起作用。它不允许输入任何内容。单击递增/递减按钮后，退格键甚至不起作用。以为我会把我的代码放在这里，看看是否有人能指出我所缺少的。我认为这与值上的 .toString() 有关，因为当我删除它时，我可以输入 TextInput，但我需要 .toString() 在那里才能输入数字并将初始值设为 @ 987654323@.

这是父组件：

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