React:如何将复选框与输入日期字段链接

Question

我是React的初学者，以下是我的问题：

我有一个日期字段和旁边的过期复选框字段。当用户选中已过期xpired字段而不是日期，则状态应记录true。

我可以把这两个字段分开。但我不知道(a(如何在选中复选框时禁用日期字段，以及(b(在选中复选复选框时将状态记录为true来代替日期变量。

在渲染中，我有以下代码(使用Bootstrap(：

<div className="row m-1">
<div className="col-xs-4 col-lg-4 col-sm-4 col-md-4 pl-2">
<label htmlFor="ExampleFormControlInput m-1">
Date
</label>
</div>
<div className="col-xs-4 col-lg-4 col-sm-4 col-md-4 pl-1">
<input
className="form-control form-control-sm"
type="date"
style={{ width: "100%" }}
min={moment(new Date()).format('YYYY-MM-DD')}
onChange={(e) => this.handleInputChange(e, "lst_dt")}
value={this.state.userData.validity}
/></div>
<div className="col-xs-2 col-lg-2 col-sm-2 col-md-2 mt-1">
<label htmlFor="ExampleFormControlInput m-1">
Expired
</label>
</div>
<div className="col-xs-1 col-lg-1 col-sm-1 col-md-1 ">
<input
className="form-control form-control-sm"
type="checkbox"
style={{ width: "auto" }}
onChange={(e) => this.handleInputChange(e, "expiry")}
value={this.state.userData.expired}
/>
</div>
</div>

在扩展组件的代码部分，我有以下内容：

state = {
userData: {
lst_dt: "",
expiry: false,
},
error: false,
};

在handleInput中，我有以下内容：

handleInputChange = (e, name) => {
let value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
this.setState({
userData: { ...this.state.userData, [name]: value },
});
};

在FormReset中，我有以下内容：

handleFormReset = () => {
this.setState({
userData: {
validity: "",
expired: false,
},
error: false,
});
};

Answer 1

禁用日期字段-

<input type="date" disabled={this.state.userData.expired}/>

选中复选框时，将状态记录为true以代替日期变量-

handleInputChange = (e, name) => {
let value = e.target.type === 'checkbox' ? e.target.checked :
e.target.value;
this.setState({
userData: { ...this.state.userData, [name]: value },
});
if (e.target.type === 'checkbox' && e.target.value) {
this.setState({
userData: { ...this.state.userData, validity: true },
});
}
};

Answer 2

尝试在日期输入中添加disabled={！this.state.userData.expirth}，如：

<input
className="form-control form-control-sm"
type="date"
style={{ width: "100%" }}
min={moment(new Date()).format('YYYY-MM-DD')}
onChange={(e) => this.handleInputChange(e, "lst_dt")}
value={this.state.userData.validity}
disabled={!this.state.userData.expiry}
/>