reactjs:使用表单中的值-单选按钮

xvw2m8pv  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(259)

我有一个带有一些变量的表单:

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中,我插入了控制台日志以查看值。。当我提交表单时,我只能读取关于域的值,而不能读取关于deleteddate的值,我不明白为什么。如何在filterresult中使用deleteddate??我的表格怎么了?非常感谢。

3hvapo4f

3hvapo4f1#

看起来您使用的是两种不同的表单,当您使用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>

,但是如果你想让它发挥作用,我建议你从状态中获取你的值,在这里你将你的值存储在状态中,但不做任何事情

相关问题