如何获取 alert.prompt 输入并使用它来操作数据？

Question

我想在我的应用程序中使用用户输入。 我在状态声明中有一堆“项目”，如下所示：

export default class App extends React.Component {

state = {
    toggled: false,
    items: {
        '2012-05-22': [{name: '9 AM - One 200 mg Paracetamol '}],
        '2012-05-23': [{name: '9 AM - One 200 mg Paracetamol'}, {name: '10 AM - One 500 mg Magnesium Tablet'}],
        '2012-05-24': [{name: '2 AM - One 200 mg Paracetamol'}],
        '2012-05-25': [{name: '9 AM - One 200 mg Ibuprofen'}, {name: '10 AM - One 500 mg Magnesium Tablet'}]
    }
}

我想接受用户输入并将其添加为“项目”中的另一个项目名称。 我对 JavaScript 还很陌生，所以我正在为如何实现这一点而苦苦挣扎。

以下是我如何获取用户输入以供参考的代码：

 render() {
    return (
        <View style={styles.background}>
            <View style={styles.medicationHeaderContainer}>
                <Text style={styles.medicationHeader}> Medication </Text>
                <TouchableOpacity
                    style={styles.buttonContainer}
                    onPress={() => Alert.prompt(
                        "Add Medication",
                        "Enter time and name of Medicine",
                        [{
                            text: "Cancel",
                            //test
                            onPress: () => console.log("Cancel Pressed"),
                            style: "cancel"
                        },
                            {
                                text: "OK",
                                onPress: input => console.log("New item: "+input)
                                // onPress: Alert.alert("HI")
                            }
                        ],
                    )}

                >
                    <Text style={styles.addButton}> + </Text>
                </TouchableOpacity>
            </View>

Answer 1

建议使用Modal 到Alert 更好。但是，在接收到状态的用户输入后添加一个项目是很重要的。该项目应附加到items，使其遵循与其相邻项目类似的结构。 您的items 结构如下：
string:Array[Object({name:<string>})]
您可以有一个提交处理函数，您可以在其中验证用户数据并进行必要的更改（非强制性），一旦完成，您应该进一步创建一个键值对，其中 key 是当前date 和 value 是一个数组，该数组进一步保存一个对象，name 作为 key，用户输入作为 value。这可以按如下方式完成：

var date = new Date().getFullYear() +'-'+ new Date().getMonth() +'-'+ new Date().getDate()
var pair = {[date]:[{name:this.state.itemname}]}

您可以注意到 date 括在方括号中，表示它是计算属性名称而不是数组项。您可以阅读有关计算属性名称的更多信息here。 一旦我们准备好我们的键值对，我们只需使用 this.setState 为基于类的组件更新 items 状态。

this.setState({items:{...this.state.items,...pair}})

使用扩展运算符将新的键值对与现有的键值对连接起来。 整个组件看起来像这样（这里使用模态而不是警报）。

import React from "react";
import {StyleSheet,Text, View,Alert,Modal,Pressable,TextInput } from "react-native";

export default class App extends React.Component {

  state = {
      toggled: false,
      itemname:'',
      items: {
          '2012-05-22': [{name: '9 AM - One 200 mg Paracetamol '}],
          '2012-05-23': [{name: '9 AM - One 200 mg Paracetamol'}, {name: '10 AM - One 500 mg Magnesium Tablet'}],
          '2012-05-24': [{name: '2 AM - One 200 mg Paracetamol'}],
          '2012-05-25': [{name: '9 AM - One 200 mg Ibuprofen'}, {name: '10 AM - One 500 mg Magnesium Tablet'}]
      }
  }

  setModalVisible = (visible) => {
    var date = new Date().getFullYear() +'-'+ new Date().getMonth() +'-'+ new Date().getDate()
    var pair = {[date]:[{name:this.state.itemname}]}
    this.setState({items:{...this.state.items,...pair}}) //append new item.
    this.setState({ toggled: visible,itemname:'' },()=>console.log(this.state.items));
  }
  setItemName = (visible) => {
    this.setState({ itemname: visible });
  }

  render() {

    const {toggled,itemname} = this.state
    return (
      <View>
        <View>
          <Text> Medication </Text>
          <Modal
            animationType="slide"
            transparent={true}
            visible={toggled}
            onRequestClose={() => {
              Alert.alert("Modal has been closed.");
              this.setModalVisible(!toggled);
            }}
          >
            <View style={styles.centeredView}>
              <View style={styles.modalView}>
      
                <TextInput value={itemname}
                onChangeText={this.setItemName}/>
                <Pressable
                  style={[styles.button, styles.buttonClose]}
                  onPress={() => this.setModalVisible(!toggled)}
                >
                  <Text style={styles.textStyle}>Add Item</Text>
                </Pressable>
              </View>
            </View>
          </Modal>
          <Pressable
          style={[styles.button, styles.buttonOpen]}
          onPress={() => this.setModalVisible(true)}
        >
          <Text style={styles.textStyle}>+</Text>
        </Pressable>
        </View>
      </View>
            )
            }
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

注意：样式取自 React Native 文档，上面的代码强调了将用户输入附加到状态变量背后的逻辑，而不是应用程序的 UI。