React-Bootstrap日期输入表单控件如何设置默认文本内容？

Question

我正在使用 React-Bootstrap 和 Hooks 构建一个应用程序，以使用以前已知的值预填充表单。但是，当呈现日期输入时，它会显示占位符文本 'dd/mm/yyyy' ，尽管元素的基础值包含正确的预设值 ，因此保存操作如果该字段未受影响仍然可以正常工作。

该字段出现在表单组中，单击按钮时表单变为可编辑（将上面屏幕截图中的按钮文本从 'Update' 切换为 'Save'，并交换日期字段显示日期选择器而不是显示计算年龄的文本字段):

Form when read only Form when editable

在功能方面，用户仍然可以 select 字段中的日期和文本然后更新以反映日期 select 按预期编辑，这只是初始默认值未显示的值。这令人沮丧，因为用户可能不需要更改此字段，但如果他们不这样做，它似乎会擦除信息。

我试过使用不同的方法

输入字段代码：

//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", “反应”：“^ 17.0.2”， “反应-bootstrap”：“^2.1.0”，

Answer 1

如果您将输入更改为受控组件，应该可以解决您的问题。你不应该在日期输入上需要 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))}
/>

React-Bootstrap日期输入表单控件如何设置默认文本内容？

How to set default text content in React-Bootstrap date input form control?

javascript

forms

datepicker

reactjs

react-bootstrap