显示输入字段的功能组件

Question

我在react JS中有一个简单的表单。我希望用户有一个选项来选择电话号码或Email地址基于偏好。

例如:

<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

这是目前我写的代码，我打算填写表单，并使用该数据时，handlessubmit发生。

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: "[phone]", // this is where the phone number from input field needs to be used
email: "[e-mail]", // 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("");