reactjs:表单中的单选按钮

6g8kf2rb  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(204)

我正在使用reactstrap创建表单,但单选按钮有问题,因为我不知道如何保存值。
表格的变量为:

const [formModel, setFormModel] = useState({
    name: '',
    deletedDate: '',
  });

我的表格是:

<AvForm model={formModel} onSubmit={filterResults} onReset={handleFormReset}>
<h3 className="text-center">Form</h3>
              <Row>
                <Col md="6">
                  <AvGroup>
                    <Label id="name" for="name">
                      Name
                    </Label>
                    <AvField
                      id="name"
                      data-cy="name"
                      type="text"
                      name="name"
                      onChange={handleChange}
                      value={formModel.name}
                    />
                  </AvGroup>
<FormGroup check>
                      <Label check>
                        <Input
                          id="deletedDate"
                          data-cy="deletedDate"
                          type="radio"
                          name="deletedDate"
                          value="true"
                          onChange={handleChange}
                        />{' '}
                        Yes
                      </Label>
                    </FormGroup>
   <FormGroup check>
                      <Label check>
                        <Input
                          id="deletedDate"
                          data-cy="deletedDate"
                          type="radio"
                          name="deletedDate"
                          value="false"
                          onChange={handleChange}
                        />{' '}
                        No
                      </Label>
                    </FormGroup>
</AvGroup>

我的筛选结果是:

const filterResults = (event, errors, values) => {
        console.log('values ', values);
        let entity = null;
        if (errors.length === 0) {
          entity = {
            ...values,
          };
        }
        //other code...

  const handleChange = e => {
    console.log('e ', e);
    const { name, value } = e.target;
    console.log('name ', name, ' value ', value);
    setFormModel(prevState => ({
      ...prevState,
      [name]: value,
    }));
  };

现在,当我提交表单时,如果我选中filterresult函数中的deleteddate单选按钮,我没有任何值(但我有名称的值)
如何正确使用单选按钮保存值?
多谢各位

omvjsjqw

omvjsjqw1#

主要的问题是你错过了 checked 属性:

<label>
    <input
      id="deletedDate"
      data-cy="deletedDate"
      type="radio"
      name="deletedDate"
      value="true"
      checked={formModel.deletedDate === "true"}
      onChange={handleChange}
    />{" "}
    Yes
  </label>

  <label>
    <input
      id="deletedDate"
      data-cy="deletedDate"
      type="radio"
      name="deletedDate"
      value="false"
      checked={formModel.deletedDate === "false"}
      onChange={handleChange}
    />{" "}
    No
  </label>

看到它在沙箱中运行吗
编辑:我已经向沙盒添加了一个提交处理程序。

相关问题