我正在使用 React-Bootstrap 和 Hooks 構建一個應用程式，以使用先前已知的值預先填充表單。但是，當呈現日期輸入時，它會顯示占位符文本“dd/mm/yyyy”，盡管元素的基礎值包含正確的預設值，因此如果該欄位未觸及，則保存操作仍然可以正常作業。
該欄位出現在表單組中，單擊按鈕時表單變為可編輯（將上面螢屏截圖中的按鈕文本從“更新”切換為“保存”，并交換日期欄位以顯示日期選擇器而不是文本欄位顯示計算的年齡）：
只讀 時的形式 可編輯時的形式
在功能方面，用戶仍然可以選擇日期，然后更新欄位中的文本以反映預期選擇的日期，它只是初始默認值不顯示。這令人沮喪，因為用戶可能不需要更改此欄位，但如果他們不這樣做，它似乎會擦除資訊。
我嘗試過使用不同的
輸入欄位的代碼：
//hooks
const [editable, setEditable] = useState(false);
const [name, setName] = useState(user.name);
const [dob, setDob] = useState(user.dob);
//functions called
export const dateFromDateString = (dateString) => {
return moment(new Date(dateString)).format('YYYY-MM-DDT00:00:00.000');
};
export const dateForPicker = (dateString) => {
return moment(new Date(dateString)).format('YYYY-MM-DD')
};
const calculateAge = (date) => {
return moment().diff(date, 'years', false);
};
//form with irrelevant fields removed
<Form className="personalInfo">
{editable ?
<Form.Group as={Row} className="mb-3 align-items-center" controlId="dobInput">
<Form.Label column lg={4}>Date of Birth:</Form.Label>
<Col>
<Form.Control type="date"
defaultValue={dateForPicker(dob)}
onfocus={dateForPicker(dob)}
placeholder={dob ? dateForPicker(dob) : "dd/mm/yyyy"}
onChange={(e) => setDob(dateFromDateString(e.target.value))}
/>
</Col>
</Form.Group>
:
<Form.Group as={Row} className="mb-3 align-items-center" controlId="ageDisplay">
<Form.Label column id="ageLabel" lg={4}>Age:</Form.Label>
<Col>
<Form.Control type="text" readOnly
value={calculateAge(dateFromDateString(user.dob))}/>
</Col>
</Form.Group>
}
<Form.Group as={Row} className="d-flex justify-content-end" controlId="nameInput">
<Button variant="outline-dark"
size="sm"
className="w-25 mx-2"
id="profileSubmitBtn"
onClick={editable ? saveChanges : () => toggleEditable(editable, setEditable)}
>
{editable ? "Save" : "Update"}
</Button>
</Form.Group>
</Form>
版本：“bootstrap”：“^5.1.3”，“react”：“^17.0.2”，“react-bootstrap”：“^2.1.0”，
uj5u.com熱心網友回復：
如果您將輸入更改為受控組件，它應該可以解決您的問題。你不應該需要一個defaultValue日期輸入，但value如果你想控制組件的值，你肯定需要一個屬性。我在下面進行了這些更改。
<Form.Control
type="date"
value={dob ? dateForPicker(dob) : ''}
onfocus={dateForPicker(dob)}
placeholder={dob ? dateForPicker(dob) : "dd/mm/yyyy"}
onChange={(e) => setDob(dateFromDateString(e.target.value))}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/443343.html
標籤：javascript 反应 形式 日期选择器 反应引导