显示输入字段的功能组件

Question

我在 React JS 中有一个简单的表单。我希望用户可以根据偏好在 Phone 号码 或 电子邮件地址 之间进行选择。

例如：

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">
   How should we contact you ?? 
  </label>
   <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">Phone Number</option>
    <option value="2">Email</option>
   </select>
</form>

我想显示以下任一字段：

  <input onChange={(event) => setPhone(event.target.value)} /> // <-- display this if a user choose Phone

  <input onChange={(event) => setEmail(event.target.value)} /> // <-- display this if a user choose Email

这是我目前编写代码的方式，我打算填写表格并在 handleSubmit 发生时使用该数据。

import React, { useState } from "react";

function Checkout({ cart }) {
  let textInput = React.createRef();

  function handleClick() {
    console.log(textInput.current.value);
  }

  const [title, setName] = useState("");
  const [contactPreference, setContactPreference] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = () => {
    const token = "fb83b937-2739-3d6e-9519-09387b92dfae";
    const data = {
      transactionReference: "string",
      paymentMethod: "CreditCard",
      checkoutOrderUrl: "http://www.test.com/",
      user: {
        name: "", // this is where the name from input field needs to be used
        msisdn: "+27610983142", // this is where the phone number from input field needs to be used
        email: "test@test.com", // this is where the email from input field needs to be used
      },
      payementMethodDetail: {
        RedirectUrl: "http://www.test.com",
        PurchaseEventWebhookUrl: "http://www.test.com",
      },

      bundle: cart.map((item) => ({
        ProductCode: `${item.ProductCode}`,
        Amount: item.amount,
        CurrencyCode: item.currencyCode,
        Quantity: item.quantity,
      })),
    };
    const requestOptions = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify(data),
    };
    fetch(
      "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/checkout/",
      requestOptions
    )
      .then((response) => response.json())
      .then((res) => console.log(res));
  };

  return (
    <div className="App">
      <button type="submit" onClick={handleSubmit}>
        Post items
      </button>
      <div>
        Name: <input onChange={(event) => setName(event.target.value)} />
        <form class="form-inline">
          <label class="my-1 mr-2" for="inlineFormCustomSelectPref">
            How should we contact you ??
          </label>
          <select
            onChange={(e) => {
              setContactPreference(e.target.value);
            }}
            class="custom-select my-1 mr-sm-2"
            id="inlineFormCustomSelectPref"
          >
            <option selected>Choose...</option>
            <option value="phone">Phone Number</option>
            <option value="email">Email</option>
          </select>
          {contactPreference === "phone" ? (
            <input
              placeholder="Enter your phone number."
              onChange={(event) => setPhone(event.target.value)}
            />
          ) : contactPreference === "email" ? (
            <input
              placeholder="Enter your email address."
              onChange={(event) => setEmail(event.target.value)}
            />
          ) : (
            <></>
          )}
        </form>
      </div>
    </div>
  );
}

export default Checkout;

Answer 1

给你，只需将他们的偏好选项存储在状态中，然后显示相应的输入字段。

    const [contactPreference, setContactPreference] = useState("");
    const [phone, setPhone] = useState("");
    const [email, setEmail] = useState("");
    return (
        <div>
            <form class="form-inline">
                <label class="my-1 mr-2" for="inlineFormCustomSelectPref">
                    How should we contact you ??
                </label>
                <select
                    onChange={(e) => {
                        setContactPreference(e.target.value);
                    }}
                    class="custom-select my-1 mr-sm-2"
                    id="inlineFormCustomSelectPref"
                >
                    <option selected>Choose...</option>
                    <option value="phone">Phone Number</option>
                    <option value="email">Email</option>
                </select>
                {contactPreference === "phone" ? (
                    <input
                        placeholder="Enter your phone number."
                        onChange={(event) => setPhone(event.target.value)}
                    />
                ) : contactPreference === "email" ? (
                    <input
                        placeholder="Enter your email address."
                        onChange={(event) => setEmail(event.target.value)}
                    />
                ) : (
                    <></>
                )}
            </form>
        </div>
    );

通过更改以下内容在 POST 请求中使用收集的数据：

    user: {
                name: name, // remember to change the useState declaration
                msisdn: phone, 
                email: email, 
            },

你应该改变

    const [title, setName] = useState("");

到

    const [name, setName] = useState("");

显示输入字段的功能组件

Functional Component to display input fields

javascript

reactjs

react-router

react-redux

react-hooks