How to use setState call back to update value prop of TextInput

问题

I am new in React and trying to build dynamic form. It seems to work fine. The problem is when i type the field values, they are shown in screen, but the value property of Textinput remain null. I tried to explore all options, and it came down to async of setState. Since i am new i do not know how to make a call back function which can populate the value property of the dynamic form fields.

I have not inlcuded all the code, just what i thought would be relevant to avoid burden.

thanks sal

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>


        );

    }

}

回答1:

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

    let item = { };

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

Replace all your function with spread operator rather than directly assigning into the object.

回答2:

Try this and check

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

Note: Your whole code may help much to debug your issue

回答3:

Just in case for someone interested. This may not be the best solution. As this is my first project in react native.

Although i was not able to get the values prop using this.state, and they remained null. For my dynamic form, i made a function containing my Views/textinput with an index argument, provided by my map function(which iterates over an array that has length equal to number of forms added). I used onChageText method and in setState used a callback to save the typed values in an object with an id, that needs to be equivalent to the index of my dynamics mapped form. Using index of object of arrays, values=this.state.object[index],values, is saved in dynamic form.

It still did not populate the values prop, but it sure did maintain the typed content in the front end of the previous form when i add new form.

来源：https://stackoverflow.com/questions/64124866/how-to-use-setstate-call-back-to-update-value-prop-of-textinput