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

我不相信有一种方法可以从表单中获取所有值。

我的建议是，将一行作为组件，然后使用React.memo-因此，只有在其中有实际更改时，它才会重新呈现。这就是我解决了很多性能问题的方式。