ReactJs：单击提交按钮时读取所有表单输入值

Question

我的表单由多行组成： 这是代码：

   <Form>
              <Row form>
                <Col md={3}>
                  <FormGroup>
                    <Label for="element">Element</Label>
                    <Input type="text" name="element" id="element" />
                  </FormGroup>
                </Col>
                <Col md={3}>
                  <FormGroup>
                    <Label for="description">Description courte</Label>
                    <Input
                      type="text"
                      id="description"
                      name="description"
                    />
                  </FormGroup>
                </Col>
                <Col md={3}>
                  <FormGroup>
                    <Label for="coutUnitaire">Coût unitaire</Label>
                    <Input
                      type="text"
                      name="coutUnitaire"
                      id="coutUnitaire"
                    />
                  </FormGroup>
                </Col>
                <Col md={3}>
                  <FormGroup>
                    <Label for="quantite">Quantité</Label>
                    <Input type="text" name="quantite" id="quantite" />
                  </FormGroup>
                </Col>
              </Row>
              <Button
                color="primary"
                className="float-right"
                onClick={this.onDevisCreer}
              >
                Créer le devis
              </Button>
            </Form>

通常，在从表单中检索值时，我会使用 value 属性和监听器：

   <Input
                        type="text"
                        id="noteText"
                        name="noteText"
                        type="textarea"
                        value={this.state.noteText}
                        onChange={this.onChange}
                        required
                      />

听者：

  onChange(e) {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }

但是，由于该行将重复多次，因此我无法为每个输入创建状态属性（每行 4 项* nbr 行）。

我想要的最终结果是一个对象数组，其中每个对象都包含一行表格中的信息：

    // I need to create an array of this:
// {
//       element: "TC 100",
//       description: "Toner Cartridge",
//       quantite: 2,
//       coutUnitaire: 2,
//       total: coutUnitaire*quantite, // to be calculated
//     }

如果我不像往常那样将它们绑定到状态属性，我仍然看不到如何检索表单输入的值。

Answer 1

我不相信有办法从表单中获取所有值。您必须使用controlled input（这意味着您需要将value 与onChange 一起使用）。

如果您想使用uncontrolled inputs，另一种方法是您可以为每个输入分配ref，然后在提交时读取值。

我的建议是使用受控输入，将 row 作为新组件，然后使用 React.memo - 因此只有在实际发生更改时才会重新渲染。这就是我解决很多性能问题的方法。