javascript - React Native TextInput wont allow typingtext change - Stack Overflow

admin管理员组

文章数量:1404461

I have a ponent that has a TextInput and 2 buttons. 1 button increments and the other decrements. I have an onChange and value on the TextInput and when the buttons are clicked the value changes(the text in the input increases or decreases), however typing the value via the TextInput, it doesn't work. It isn't allowing anything to be typed. Backspace won't even work after the increment/decrement buttons are clicked. Thought I'd put my code here to see if anyone could point out what I am missing. I think it has something to do with the .toString() on the value because when I remove that, I am able to type in the TextInput, but I need that .toString() there in order to do numbers and have the initial value as null.

This is the parent ponent:

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

I have a ponent that has a TextInput and 2 buttons. 1 button increments and the other decrements. I have an onChange and value on the TextInput and when the buttons are clicked the value changes(the text in the input increases or decreases), however typing the value via the TextInput, it doesn't work. It isn't allowing anything to be typed. Backspace won't even work after the increment/decrement buttons are clicked. Thought I'd put my code here to see if anyone could point out what I am missing. I think it has something to do with the .toString() on the value because when I remove that, I am able to type in the TextInput, but I need that .toString() there in order to do numbers and have the initial value as null.

This is the parent ponent:

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

This is the child ponent:

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

• javascript
• reactjs
• react-native
• textinput

Share Follow edited Jan 30, 2018 at 17:53 StuffedPoblano asked Jan 30, 2018 at 17:44 StuffedPoblanoStuffedPoblano 69522 gold badges1212 silver badges3737 bronze badges 4

• 1 does it work if you remove .toString() on value? – floor Commented Jan 30, 2018 at 17:58
• @floor in fact is does and I actually just edited my initial post with this finding. – StuffedPoblano Commented Jan 30, 2018 at 17:59
• remove the toString and change your value constant line to const value = measurement ? measurement : null – floor Commented Jan 30, 2018 at 18:05
• @floor doing this I get an invalid prop type of number supplied to value, expected string and it also makes it so my increment and decrement buttons no longer work. – StuffedPoblano Commented Jan 30, 2018 at 18:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

your TextInput have property called onChangeText this event will be triggered each time you write to the input

checkout my code

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

The part you are missing is to update the value on change

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


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

本文标签： javascriptReact Native TextInput wont allow typingtext changeStack Overflow