ReactJS - Как получить значение формы из нескольких дочерних компонентов - PullRequest
Новая
       17

ReactJS - Как получить значение формы из нескольких дочерних компонентов

0 голосов
/ 07 февраля 2020

Я знаю, что это может иметь некоторые похожие вопросы, но я не могу найти решение для моей ситуации.

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

Это индекс. js

<code>class ListOfProducts extends React.Component {
  constructor()
  {
    super();
    this.appendChild = this.appendChild.bind(this);
    this.state = {
      children: [],
      }
  }  

    appendChild() {
      this.setState({
        children: [
          ...this.state.children, <NewComponent/>
        ]
      });
    }

    render() {
      return (
        <form>
          <div>
            <pre><h2 className="h2"> Sales Order</h2>
{this.state.children.map (child => child)}
this.appendChild ()}> Добавить товары )}}

Это частичный код NewComponent. JS

            <select
              name="sel"
              className="sel"
              value={this.state.selecteditems}
              onChange={(e) => 
                this.setState({selecteditems: e.target.value})}
            >
            {this.state.data.map(item => 
              <option key={item.productID} value={item.unitPrice}>
                {item.itemName}
              </option>
            )}
            </select>

            {/*unit price*/}
            <p>Unit Price: RM {this.state.selecteditems} </p>

            {this.state.selecteditems.length ? (
              <p>Quantity: </p>
            ) : null }

            {/*button to add quantity*/}
            {this.state.selecteditems.length ? (
              <button onClick={this.addPro}> + </button>
            ) : null }

            {/*textbox for quantity*/}
            {this.state.selecteditems.length ? (
              <input type="text" ref="quan" placeholder="Quantity" 
                value={this.state.quantity}
                onChange={(e) => 
                  this.setState({quantity: e.target.value})}
                >
                </input>
            ) : null }

            {/*button to decrease quantity}*/}
            {this.state.selecteditems.length ? (
              <button onClick={this.decPro}> - </button>
            ) : null }

            {/*subtotal*/}
            {this.state.selecteditems.length ? (
              <p>Sub Total: RM {this.state.subtot} </p>
            ) : null }

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 07 февраля 2020

Быстрый и тупой: добавьте обратный вызов, как это

<NewComponent onChange={this.onNewComponentChange}/>

(и реализуйте вызов этого обратного вызова onChange при каждом изменении в NewComponent, конечно)

0 голосов
/ 07 февраля 2020

Есть два способа получить значение от дочернего компонента:

  1. Иметь систему управления состоянием (что-то вроде приставки), которая может фактически хранить данные всех дочерних компонентов. Когда данные дочернего компонента изменяются, его следует синхронизировать с хранилищем, и родительский компонент может использовать его для публикации данных при отправке.
  2. Назначьте ref каждому дочернему компоненту при его добавлении. сохранить эти значения в массиве. Выполните итерацию по этим ссылкам при отправке формы и вызовите определенную c функцию получения дочернего компонента, чтобы получить его данные.

Предпочтительным способом является первый метод.

...