如何使用 setState 回调来更新 TextInput 的 value 属性答案

【问题标题】：How to use setState call back to update value prop of TextInput如何使用 setState 回调来更新 TextInput 的 value 属性
【发布时间】：2020-09-29 17:41:06
【问题描述】：

我是 React 的新手，正在尝试构建动态表单。它似乎工作正常。问题是当我输入字段值时，它们显示在屏幕上，但 Textinput 的 value 属性保持为空。我试图探索所有选项，最终归结为 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>


        );

    }

}

【问题讨论】：

我没有看到你调用了“输入”函数来渲染 TextInput 的任何地方！你在哪里叫的？
谢谢，我还没有粘贴完整的代码。我在另一个函数中调用它来推送表单。我没有包括在这里。很抱歉造成混乱。

标签： javascript reactjs react-native react-redux react-native-android

【解决方案1】：

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

    let item = { };

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

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

【讨论】：

谢谢。我试过。它没有改变 value 属性，我希望它会这样做。

【解决方案2】：

试试这个并检查

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

注意：您的整个代码可能有助于调试您的问题

【讨论】：

【解决方案3】：

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

虽然我无法使用 this.state 获取 values 属性，但它们仍然为空。对于我的动态表单，我创建了一个函数，其中包含我的视图/文本输入和索引参数，由我的 map 函数提供（它迭代一个长度等于添加的表单数的数组）。我使用了 onChageText 方法，并在 setState 中使用回调将键入的值保存在具有 id 的对象中，这需要等同于我的动态映射表单的索引。使用数组对象的索引，values=this.state.object[index],values，以动态形式保存。

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

【讨论】：