ReactJs: чтение всех значений ввода формы при нажатии на кнопку отправки - PullRequest
Новая
       13

ReactJs: чтение всех значений ввода формы при нажатии на кнопку отправки

0 голосов
/ 20 апреля 2020

Моя форма состоит из нескольких строк: enter image description here Это код: 

   <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>

Обычно, когда дело доходит до извлечения значений из формы I будет использовать атрибут 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
//     }

Я до сих пор не могу понять, как я могу получить значения входов формы, если я не буду связывать их со свойством состояния, как обычно.

1 Ответ

0 голосов
/ 20 апреля 2020

Я не верю, что есть способ получить все значения из формы. Вы должны будете использовать управляемый вход (то есть вам нужно будет использовать value с onChange).

Другой способ, если вы хотите использовать неконтролируемые входы , это то, что вы можете назначить ref для каждого входа и затем читать значения при отправке.

Мое предложение будет использовать контролируемые входы, создать строку как новый компонент, а затем использовать React.memo - так что он будет перерисовываться только при наличии фактического изменения в нем. Именно так я решил немало проблем с производительностью.

...