如何阻止用户在反应表单中输入空日期

Question

我正在尝试实现一个表单，该表单可以阻止用户不在表单中选择日期。以下是我迄今为止尝试的内容，但没有成功(用户根本无法选择日期，表单仍将提交：

const [inputs, setInputs] = useState({
name: null,
date: null
});
const { name, date } = inputs;
// And inside the form:
<div className="form-group">
<label>Date appointment: </label>
<input type="date" name="date" onInput={handleChange} value={date} />
{submitted && date === null && (
<div className="invalid-feedback">Appointment date is required</div>
)}
</div>;

我尝试将日期初始化为""和!date作为条件，但仍然不起作用。如何实现这个简单的功能？它与表单的所有其他字段一起工作。

Answer 1

您可以使用输入字段的禁用属性

const [inputs, setInputs] = useState({
name: null,
date: null
});
const { name, date} = inputs;
// And inside the form:
<div className="form-group">
<label>Date appointment: </label>
<input
type="date"
name="date"
onInput={handleChange}
value={date} 
disabled={date === null ? true : false}
/>
{submitted && date === null && (
<div className="invalid-feedback">Appointment date is required</div>
)}
</div>

Answer 2

在填写所有必填字段之前，您必须阻止提交表单，以下是代码中的固定示例：

function FormTest() {
const [date, setDate] = React.useState("");
const isSubmittable = () => (date ? true : false);
const handleOnChange = (event) => setDate(event.target.value);
return (
<div className="form-group">
<label>Date appointment: </label>
<input type="date" name="date" onInput={handleOnChange} value={date} />
<button disabled={!isSubmittable()}>Submit!</button>
</div>
);
}

建议：最好使用像react form hook或Formik这样的表单状态管理器来实现表单。