как установить состояние (массив) и проверить несколько текстовых входов, добавленных с помощью цикла - реагировать на нативный - PullRequest
Новая
       44

как установить состояние (массив) и проверить несколько текстовых входов, добавленных с помощью цикла - реагировать на нативный

1 голос
/ 03 апреля 2019

(новичок в реакции-нативном) Я добавил n число TextInputs на экране:

  1. Необходимо установить состояние (массив) для этих TextInputs
  2. Как проверить их, чтобы убедиться, что они не пусты, нажмите кнопку 
renderFields(listNum) {    
    var numLists = parseInt(listNum, 10);    
    var fields = [];
    var numStr = "";
    for (let i = 0; i < numLists; i++) {
        numStr = JSON.stringify(i + 1);
        fields.push(
            <View key={i} style={styles.butInput}>
                <View style={styles.ChildViewStyle}>
                    <TextInput
                        ref={input => {
                          this.textInput = input;
                        }}
                        key={"txt_" + i}
                        style={styles.TextInputStyleClass}
                        textAlign={"left"}
                        editable={true}
                        maxLength={20}
                        defaultValue={numStr}
                    />
                </View>
            </View>
        );
    }
    return fields;
}

render() {
    const { navigation } = this.props;
    const listNum = navigation.getParam("listNum", 2);

    return (
        <View style={styles.container}>

            <View style={styles.InputContainer}>
                <ScrollView>{this.renderFields(listNum)}</ScrollView>
            </View>

            <View style={styles.settingRow}>
                <TouchableOpacity onPress={() => this.validateNum()}>
                    <Text style={styles.settingsBtnText}>S A V E</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

Can't move further, please help

Ответы [ 2 ]

0 голосов
/ 03 апреля 2019

Подумайте об использовании библиотеки приставки для проверки Это намного лучше, чем проверка каждого поля вручную.

https://redux -form.com / 8.1.0 /

https://esbenp.github.io/2017/01/06/react-native-redux-form-immutable-styled-components/

https://medium.com/wolox-driving-innovation/https-medium-com-wolox-driving-innovation-easy-forms-in-react-native-with-redux-form-1cdc16a9a889

0 голосов
/ 03 апреля 2019

Вы можете проверить следующим образом:

ref = {o => (this ["ref_" + i] = o)} 

validateNum() {
  var isValid = true;
  this.forms.some((i,index)=> {
            if (this["ref_"+index] && !!this["ref_"+index].text() ) {
               isValid =false;
            }
        });
  return isValid;
}

Чтобы получить текст из TextInput, создайте пользовательскийTextInput.

...