Question

我正在尝试使用WordPress woocommerce rest API创建订单。我可以使用带有响应本机发布的虚拟JSON数据发布订单，但是我需要将对象分配给文本框。我是React Native的新手。我需要将此名字从对象分配给文本输入。我无法触发任何解决方案，也没有对本机应用程序有深入了解的知识。这是我的代码。

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Platform,
  StatusBar,
  Image,
  TouchableHighlight,
  ToolbarAndroid,
  FlatList,
  ScrollView,
  Alert,
  TextInput
} from "react-native";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { StackNavigator } from "react-navigation";
import {
  Icon,
  Button,
  Container,
  Header,
  Content,
  Left,
  Right,
  Item,
  Input,
  Card,
  CardItem
} from "native-base";
import { Ionicons, FontAwesome } from "@expo/vector-icons";
import FAIcon from "react-native-vector-icons/FontAwesome";
//import * as ProductAction from '../actions/ProductActions';

class Checkout extends Component {
  constructor(props) {
    super(props);
    data = this.state = {
      payment_method: "",
      payment_method_title: "Cash on delivery",
      billing: {
        first_name: "",
        last_name: "Kr"
      }
    };
  }

  postOrder = () => {
    url = "https://example.com/wp-json/wc/v2/orders?&consumer_key=mykey&consumer_secret=mykey";
    fetch(url, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });
  };

  render() {
    const { navigate } = this.props.navigation;

    return (
      <View style={styles.container}>
        <Text>Checkout Page</Text>
        <TouchableOpacity
          style={{ backgroundColor: "#000", height: 50 }}
          onPress={this.postOrder}
        >
          <Text style={{ color: "#fff" }}> Pors Order </Text>
        </TouchableOpacity>
        <TextInput style={styles.textInputStyle} placeholder="Enter Name" />
      </View>
    );
  }
}

export default Checkout;

Answer 1

将value中的TextInput设置为this.state.billing.first_name，并在first_name值更改时更新TextInput。

您也可以直接在this.state方法中使用postOrder。

示例

class Checkout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      payment_method: "",
      payment_method_title: "Cash on delivery",
      billing: {
        first_name: "",
        last_name: "Kr"
      }
    };
  }

  postOrder = () => {
    url = "https://example.com/wp-json/wc/v2/orders?&consumer_key=mykey&consumer_secret=mykey";
    fetch(url, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify(this.state)
    });
  };

  setFirstName = (first_name) => {
    this.setState({
      billing: {
        ...this.state.billing,
        first_name
      }
    });
  };

  render() {
    const { navigate } = this.props.navigation;

    return (
      <View style={styles.container}>
        <Text>Checkout Page</Text>
        <TouchableOpacity
          style={{ backgroundColor: "#000", height: 50 }}
          onPress={this.postOrder}
        >
          <Text style={{ color: "#fff" }}> Pors Order </Text>
        </TouchableOpacity>
        <TextInput
          style={styles.textInputStyle}
          placeholder="Enter Name"
          value={this.state.billing.first_name}
          onChange={this.setFirstName}
        />
      </View>
    );
  }
}

Answer 2

最终得到了答案。这可以正常工作

class Checkout extends Component {
constructor(props) {
super(props);
this.state = {
firstName: '',
lastName: '',
}
}

postOrder = () => {
url = "https://example.com/wp-json/wc/v2/orders?&consumer_key=mykey&consumer_secret=mykey";

let data = {
payment_method: '',
payment_method_title: 'Cash on delivery',
billing: {
first_name: this.state.firstName,
last_name: this.state.lastName
}
}

console.log('Data:' + JSON.stringify(data))
fetch(url, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});
};

render() {
const {navigate} = this.props.navigation;

return (
<View style={styles.container}>
<Text>Checkout Page</Text>
<TouchableOpacity
style={{backgroundColor: "#000", height: 50}}
onPress={this.postOrder}>
<Text style={{color: "#fff"}}> Pors Order </Text>
</TouchableOpacity>

<TextInput style={styles.textInputStyle}
placeholder="Enter Name"
value={this.state.firstName}
onChangeText={firstName => this.setState({firstName})}
returnKeyType="next"
underlineColorAndroid='rgba(0,0,0,0)'
selectionColor={'black'}
numberOfLines={1}/>

<TextInput style={styles.textInputStyle}
placeholder="Enter Name"
value={this.state.lastName}
onChangeText={lastName => this.setState({lastName})}
returnKeyType="next"
underlineColorAndroid='rgba(0,0,0,0)'
selectionColor={'black'}
numberOfLines={1}/>
</View>
);
}
}

export default Checkout;

如何在React Native中从对象元素为文本框分配值？

2 个答案: