Сохранение состояния входов, добавленных пользователем в React

Question

Я работаю над небольшим персональным проектом с использованием React on Rails.Я очень новичок в этих вещах.

У меня есть реактивный компонент, который является формой.У меня также есть другой компонент, который имеет некоторые входные данные, которые пользователь может добавить столько, сколько необходимо.Используя кнопку Add Properties.Я пытаюсь сохранить состояние каждого ввода, который добавляется.Я мог бы сам компонент сохранить состояние, но как тогда я бы отправил его с моим пост-запросом выборки, который происходит на клике?

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

https://reactjs.org/docs/context.html https://redux.js.org/basics/usagewithreact

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

  class ProductsCreate extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      upc: '',
      availableOn: '',
      inputs: []
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    if (e.target.name === 'name') {
      this.setState({ name: e.target.value });
    }
    if (e.target.name === 'upc') {
      this.setState({ upc: e.target.value });
    }
    if (e.target.name === 'date') {
      this.setState({ availableOn: e.target.value });
    }
  }

  submitData = () => {
    fetch(`/send_data`, {
      method: 'POST',
      body: JSON.stringify({
        name: this.state.name,
        upc: this.state.upc,
        availableOn: this.state.availableOn
      }),
      headers: {
        'Content-Type': 'application/json'
      },
      credentials: 'same-origin'
    })
      .then(response => {
        return response.json;
      })
      .then(data => {
        console.log(data);
      });
  };

  clickHandler = e => {
    e.preventDefault();
    this.submitData();
  };

  appendInput = e => {
    e.preventDefault();
    const newInput = `input-${this.state.inputs.length}`;
    this.setState({ inputs: this.state.inputs.concat([newInput]) });
  };

  render() {
    return (
      <div className="form_container">
        <h1>Products</h1>
        <form>
          <label>Name</label>
          <input type="text" name="name" onChange={this.handleChange} />
          <label>UPC</label>
          <input type="text" name="upc" onChange={this.handleChange} />
          <label>Availiable On</label>
          <input
            type="text"
            name="date"
            placeholder="mm/dd/yyyy"
            onChange={this.handleChange}
          />
          <h1>Properties</h1>
          {this.state.inputs.map(input => (
            <Properties key={input} />
          ))}
          <button onClick={this.appendInput}>Add Properties</button>
          <button onClick={this.clickHandler}>Save</button>
        </form>
      </div>
    );
  }
}

export default ProductsCreate;

Это компонент, который будет добавлен при нажатии

import React from 'react';

class Properties extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="property_container">
        <label>Property Name</label>
        <input type="text" name="propertyName" />
        <label>Property Value</label>
        <input type="text" name="propertyValue" />
      </div>
    );
  }
}

export default Properties;

Answer 1

Передайте изменение дескриптора в качестве реквизита для компонента Properties, а затем используйте этот реквизит в input onChange в вашем компоненте Properties.Сделайте следующие правки.Я также предлагаю, если вы не хотите постоянно обновлять состояние для каждого набранного символа, используйте debounce.

ProductsCreate

      {this.state.inputs.map(input => (
        <Properties key={input} onChange={this.handleChange} name={input}/>
      ))}

Свойства

      <input type="text" name={this.props.name} onChange={this.props.onChange}/>