无法在 React Native 中输入文本输入

Question

I've got the following class:

export default class DonationFormScreen extends React.Component {

  constructor(props) {
    super(props);
    
    this.state = {
      title: this.props.title,
    };

  }
  
  state = {
    units: '0',
    comment: '-'
  }


  render() {
          let institution=this.props.route.params.institution;
          let title = this.props.route.params.title;
          return ( 
          <View>
            <View style={styles.container}>
              <Text style={styles.label}>¿Cuántas unidades?</Text>
              <TextInput
                style={styles.input}
                placeholder="Unidades..."
                onChangeText={(text) => this.setState({units:text})}
              />
              <Text style={styles.label}>¿Algún otro comentario?</Text>
              <TextInput
                style={styles.input}
                placeholder="Comentar..."
                onChangeText={(text) => this.setState({comment:text})}
              />
              <View style={styles.button}>
                <Button color="white" title="Donar"/>
              </View>
            </View>  
          </View>
      );
    }
}

Turns out I'm unable to type inside my textinputs. Whenever I click on them I can get the placeholder to disappear and it seems to let me type but nothing gets written on screen.

Answer 1

You didn't give initial value to your Text Input

<TextInput
                value={this.state.units}
                style={styles.input}
                placeholder="Unidades..."
                onChangeText={(text) => this.setState({units:text})}
              />

and the same goes for comment TextInput

<TextInput
                value={this.state.comment}
                style={styles.input}
                placeholder="Comentar..."
                onChangeText={(text) => this.setState({comment:text})}
              />