Блог

Я новичок в React и пытаюсь создать динамическую форму. Кажется, все работает нормально. Проблема в том, что когда я ввожу значения полей, они отображаются на экране, но свойство value Textinput остается нулевым. Я попытался изучить все варианты, и все свелось к асинхронности setState. Поскольку я новичок, я не знаю, как создать функцию обратного вызова, которая может заполнять свойство value полей динамической формы.

Я не включил весь код, только то, что, по моему мнению, было бы уместно, чтобы избежать нагрузки.

спасибо, сэл

 
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            InputArray: [],
            view_data: {
                id: 0,
                data: null
            },
            step: 0,
            TotalItem: [],
            item:
            {
                id: 0,
                Email: null,
                Password: null,
                Address: null

            }

        }
    };


///onCHANGE FUNCTIONS

   EnterValue1 = (e) => {
        e.persist();

        let item = { ...this.state.item };
        item.Email= e.target.value;

        this.setState({ item: item });

  EnterValue2 = (e) => {
        e.persist();


        let item = { ...this.state.item };
        item.Password = e.target.value;

        this.setState({ item: item });

   EnterValue3 = (e) => {
        e.persist();

        let item = { ...this.state.item };
        item.Address = e.target.value;

        this.setState({ item: item });

//Dynamic form

   Inputs = () => {

        return (

            <View >

                <TextInput
                    
                    placeholder="enter email"
                    onBlur={this.focusHandler}
                    value={this.state.item.Email}
                    onChange={this.EnterValue1}
                    style={{ borderWidth: 2, borderColor: 'skyblue', margin: 20 }}
                />

                <TextInput
                    
                    placeholder="Password"
                    onBlur={this.focusHandler}
                    value={this.state.item.Password}
                    onChange={this.EnterValue2}
                    style={{ borderWidth: 2, borderColor: 'skyblue', margin: 20 }}
                />

                <TextInput
                    
                    placeholder="Address"
                    onBlur={this.focusHandler}
                    value={this.state.item.Address}
                    onChange={this.EnterValue3}
                    style={{ borderWidth: 2, borderColor: 'skyblue', margin: 20 }}
                />


            </View>

        )


    };

// Render Method


    render() {
        return (
            <View style={{ flex: 1, marginTop: 20 }}>
                <ScrollView style={styles.scrollView} keyboardShouldPersistTaps='always' >
                    {this.state.InputArray.map((item, index) => (
                        //using highlight because it doenst pass on its effect to children, opacity does

                        <View key={index} onPress={() => this.viewPress(index)}>
                            <TouchableOpacity onPress={() => this.viewPress(index)}>


                                {item.data}
                                {this.state.step === 0 ?
                                    <View style={styles.container}>
                                        <View style={{ flex: 1 }} >
                                            <Button type='button' style={{ flex: 1, backgroundColor: 'red' }} title="add" onPress={this.add} />
                                        </View>
                                    </View>


                                    :


                                    <View style={styles.container}>
                                        <View style={{ flex: 1 }} >
                                            <Button type='submit' style={{ flex: 1, backgroundColor: 'red' }} title="add" onPress={this.add} />
                                        </View>
                                        <View style={{ flex: 1 }}>
                                            <Button type='button' style={{ flex: 1, backgroundColor: 'red' }} title="Remove" onPress={() => this.remove(index)} />
                                        </View>
                                    </View>



                                }



                            </TouchableOpacity>

                        </View>



                    ))
                    }


                </ScrollView>
                <View style={styles.container}>

                    <View style={{ flex: 1 }}>
                        <Button type='submit' style={{ flex: 1, backgroundColor: 'blue' }} title="submit" onPress={this.submit} />
                    </View>
                </View>

            </View>


        );

    }

}

  

 EnterValue3 = (e) => {
    e.persist();

    let item = { };

    this.setState({ item: {...this.state.item, address: e.target.value });
}
  

Замените всю вашу функцию на оператор распространения, а не напрямую присваивайте объекту.

Попробуйте это и проверьте

 EnterValue1 = (e) => {
  e.persist();
  this.setState({
    item: {
      ...this.state.item,
      Email: e.target.value,
    }
  });
}
  

Примечание: весь ваш код может сильно помочь в отладке вашей проблемы

На всякий случай, если кому-то интересно. Это может быть не лучшим решением. Поскольку это мой первый проект в react native.

Хотя я не смог получить значения prop, используя this.state, и они остались нулевыми. Для моей динамической формы я создал функцию, содержащую мои Views / textinput с аргументом index, предоставленным моей функцией map (которая выполняет итерацию по массиву, длина которого равна количеству добавленных форм). Я использовал метод onChageText, а в setState использовал обратный вызов для сохранения введенных значений в объекте с идентификатором, который должен быть эквивалентен индексу моей формы, отображаемой динамикой. Используя индекс объекта массивов, значения=this.state.object[index], значения сохраняются в динамической форме.

Он по-прежнему не заполнял значение prop, но, несомненно, сохранял введенное содержимое во внешнем интерфейсе предыдущей формы, когда я добавляю новую форму.