React Native TextInput 不允许 typing/text 更改

Question

我有一个组件，它有一个 TextInput 和 2 个按钮。 1 个按钮递增，另一个按钮递减。我在 TextInput 上有一个 onChange 和值，当单击按钮时，值会发生变化（输入中的文本增加或减少），但是通过 TextInput 键入值，它不起作用。它不允许输入任何内容。单击 increment/decrement 按钮后退格键甚至不起作用。以为我会把我的代码放在这里，看看是否有人能指出我遗漏了什么。我认为它与值上的 .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

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

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


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

Answer 2

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

React Native TextInput 不允许 typing/text 更改

React Native TextInput wont allow typing/text change

javascript

textinput

reactjs

react-native