如何使用 setState 回调来更新 TextInput 的 value prop

Question

我是 React 的新手，正在尝试构建动态表单。它似乎工作正常。问题是当我键入字段值时，它们显示在屏幕上，但 Textinput 的值属性仍然为空。我尝试探索所有选项，结果归结为 setState 的异步。因为我是新手，所以我不知道如何制作可以填充动态表单字段值属性的回调函数。

我没有包括所有代码，只是我认为与避免负担相关的代码。

谢谢萨尔


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>


        );

    }

}

Answer 1

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

    let item = { };

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

用扩展运算符替换所有函数，而不是直接赋值给对象。

Answer 2

试试这个并检查

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

注意：您的整个代码可能对调试您的问题有很大帮助

Answer 3

以防有兴趣的人。这可能不是最好的解决方案。因为这是我在 React Native 中的第一个项目。

尽管我无法使用 this.state 获得 values 道具，但它们仍然为空。对于我的动态表单，我创建了一个函数，其中包含我的 Views/textinput 和一个索引参数，由我的 map 函数提供（它遍历一个长度等于添加的表单数的数组）。我使用了 onChageText 方法，并在 setState 中使用了一个回调来将键入的值保存在一个具有 id 的对象中，该 id 需要等同于我的动态映射表单的索引。使用数组对象的索引，values=this.state.object[index],values，以动态形式保存。

它仍然没有填充 values 属性，但是当我添加新表单时，它确实在前一个表单的前端保留了键入的内容。

如何使用 setState 回调来更新 TextInput 的 value prop

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

javascript

reactjs

react-native

react-redux

react-native-android