Как я могу проверить ввод текста в реагировать родной для минимального количества символов

Question

У меня есть текстовый ввод для пользователя, чтобы отправить сообщение. Я хочу, чтобы всплыло сообщение об ошибке, если пользователь вводит менее 10 символов.

<TextInput
        style={styles.textArea}
        underlineColorAndroid="transparent"
        placeholder="Ask a question or comment"
        placeholderTextColor="grey"
        numberOfLines={1}
        textAlignVertical= 'top'
        multiline={true}
      />

Answer 1

Вы можете использовать комбинацию onSubmitEditing prop с blurOnSubmit .

 state = {
   value: ''
 }

 onChange = (value) => this.setState({value})

 checkValue = () => {
   if(this.state.value.length < 10) { // ... Condition }
 }

 <TextInput
    ...
    blurOnSubmit={true}
    onChangeText={this.onChange}
    onSubmitEditing{this.checkValue}
  />

Answer 2

Вы можете проверить на кнопке onPress в TouchableOpactiy , TochablableHighlight . а также в onSubmitEditing prop с blurOnSubmit . Код предлагается при нажатии кнопки.

onSubmit = () => {
    if (this.state.name.trim().length < 8) {
        Alert.alert('Alert', 'Password must be minimum 8 characters');
        return;
    }
    //Do your stuff if condition meet.
}

render() {
    return (
        <View style={{ flex: 1 }}>
            <TextInput
                style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
                onChangeText={(text) => this.setState({ password: text })}
                maxLength={16}
                secureTextEntry={true}
                value={this.state.password}
            />
            <TouchableOpacity onPress={() => this.onSubmit()}>
                <Text style={styles.submit}>Submit</Text>
            </TouchableOpacity>
        </View>

    )
}

Answer 3

Вы можете добавить onChangeText={(text) => this.setState({messageText: text})} prop, чтобы сохранить введенный текст в вашем состоянии. Тогда у вас может быть логическая зависимость от this.state.messageText.length, будь то событие onBlur в TextInput или если пользователь нажимает кнопку отправки на экране.

Для отображения сообщения об ошибке вы можете использовать Alert.alert().