[英]ReactJS: Using value from form - radio button
我有一個帶有一些變量的表單:
const [formModel, setFormModel] = useState({
realm: '',
deletedDate: 'all',
});
DeletedDate 是一個單選按鈕,應具有值 -> "all", "true", "false"
表格是:
<AvForm model={formModel} onSubmit={filterResults} onReset={handleFormReset}>
<AvGroup>
<Label id="realm" for="realm-realm">
Realm Name
</Label>
<AvField
id="realm"
data-cy="realm"
type="text"
name="realm"
onChange={handleChange}
value={formModel.realm}
/>
</AvGroup>
<FormGroup check>
<Label id="deletedDate" check>
<Input
id="deletedDate"
data-cy="deletedDate"
type="radio"
name="deletedDate"
value="all"
checked={formModel.deletedDate === 'all'}
onChange={handleChange}
/>{' '}
All
</Label>
<br></br>
<Label id="deletedDate" check>
<Input
id="deletedDate"
data-cy="deletedDate"
type="radio"
name="deletedDate"
value="true"
checked={formModel.deletedDate === 'true'}
onChange={handleChange}
/>{' '}
Yes
</Label>
</FormGroup>
<FormGroup check>
<Label id="deletedDate" check>
<Input
id="deletedDate"
data-cy="deletedDate"
type="radio"
name="deletedDate"
value="false"
checked={formModel.deletedDate === 'false'}
onChange={handleChange}
/>{' '}
No
</Label>
</FormGroup>
現在,當我提交表單時,我調用 filterResults:
const handleChange = e => {
console.log('e ', e);
console.log('deletedDate ', formModel.deletedDate);
const { name, value } = e.target;
console.log('name ', name, ' value ', value);
setFormModel(prevState => ({
...prevState,
[name]: value,
}));
console.log('deletedDate ', formModel.deletedDate);
};
const filterResults = (event, errors, values) => {
console.log('values ', values, 'event ', event, ' errors ', errors);
let entity = null;
if (errors.length === 0) {
entity = {
...values,
};
}
console.log('entity is ', entity);
if (entity) {
現在我的問題是:
在 filterResults 中,我插入了一個控制台日志來查看值.. 當我提交表單時,我只能讀取有關領域的值,而無法讀取有關已刪除日期的值,我不明白為什么。 如何在 filterResult 中使用刪除日期? 我的表格有什么問題? 謝謝你
看起來您正在使用兩種不同的表單,當您使用 AV 表單的道具提交時,您無法訪問其他表單值,我建議將這些值存儲在同一表單中
<AvForm model={formModel} onSubmit={filterResults} onReset={handleFormReset}>
<AvGroup>
<Label id="realm" for="realm-realm">
Realm Name
</Label>
<AvField
id="realm"
data-cy="realm"
type="text"
name="realm"
onChange={handleChange}
value={formModel.realm}
/>
</AvGroup>
<AvGroup>
<Label id="realm" for="realm-realm">
Radio Input
</Label>
<AvField
id="deletedDate"
data-cy="deletedDate"
type="type value this for uses for radio inputs"
name="deletedDate"
onChange={handleChange}
value={formModel.deletedDate}
/>
</AvGroup>
,但如果你想讓這個工作,我建議你從狀態中獲取你的值,在這里你將你的值存儲在狀態中,但不對它們做任何事情
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.