顯示輸入欄位的功能組件

我在 React JS 中有一個簡單的表單。我希望用戶可以根據偏好在電話號碼或電子郵件地址之間進行選擇。

例如：

<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

這就是我目前撰寫代碼的方式，我打算在處理提交時填寫表格并使用該資料。

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: "[email protected]", // 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);
            }}
            
            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;

uj5u.com熱心網友回復：

在這里，只需將他們的偏好選項存盤在狀態中，然后顯示相應的輸入欄位。

    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);
                    }}
                    
                    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("");

標籤：javascript 反应 反应钩子 反应还原 反应路由器

上一篇：如何多個2個異步函式值Angular

下一篇：如何在d3.js中條形圖的每個條形的左上角設定模式原點？