Как я могу добавить значения состояния к значению ввода по умолчанию в React

Question

У меня есть гармошка, которая отображает 3 входа при нажатии. Пользователь может ввести значения и в эти поля, а затем сохранить их в состояние. Когда аккордеон свернут ... Я теряю входные значения. Как я могу получить их из состояния для каждого входа (если они есть?

Github Repo

Answer 1

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

import React from 'react';

export default class AddBackpack extends React.Component {
  // static contextType = ItemContext;

  constructor(props) {
    super(props);

    this.state = {};

    this.handleChange = this.handleChange.bind(this);
  }


  handleChange({target}) {
    const {name, value} = target;

    this.setState({
      [name]: value,
    })
  }

  render() {
    const {items} = this.context;
    const {handleChange} = this;

    return (
      <>
        <header>
          <h1>Create New Backpack</h1>
        </header>
        <section>
          <form id="record-backpack">
            <div className="form-section">
              <label htmlFor="backpack-title">Backpack Title</label>
              <input
                type="text"
                name="backpack-title"
                placeholder="Backpack One"
                required
              />
            </div>
            <div className="form-section">
              <h3>Select Items for Backpack</h3>
              <div className="form-items-section">
                <div className="pack-items">
                  {Object.keys(items).map(function(category, key) {
                    return (
                      <div key={key} className={`${category}-category`}>
                        {/* <button></button> DO I NEED THIS TO EXPAND COLLAPSE?*/}
                        <h4>{`${category}`}</h4>
                        {items[category].map((value, i) => (
                          <>
                            <div className="item-inputs" key={i}>
                              <input type="radio" value={value} />
                              <label htmlFor={`${value}-item`}>{value}</label>
                              <input
                                type="text"
                                name={`${value}-name`}
                                id={`${value}-${i}-name`}
                                placeholder="Brand name or model of gear"
                                required
                                value={this.state[`${value}-name`]}
                                onChange={handleChange}
                              />
                              <input
                                type="text"
                                name="backpack-size"
                                id={`${value}-${i}-size`}
                                placeholder="Size"
                                required
                                value={this.state[`${value}-name`]}
                                onChange={handleChange}
                              />
                              <input
                                type="text"
                                name="backpack-weight"
                                id={`${value}-${i}-weight`}
                                placeholder="Weight(g)"
                                required
                                value={this.state[`${value}-name`]}
                                onChange={handleChange}
                              />
                            </div>
                          </>
                        ))}{" "}
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
            <div className="pack-list" id="">
              <h3>Backpack Summary</h3>
              <div className="pack-list-row" id="pack-weight">
                <p>Total Weight:</p>
              </div>
              <div className="pack-list-row" id="weights">
                <p>
                  0.00 kg
                  <br />
                  0.00 oz
                </p>
              </div>
              {/* <div className="pack-list-row" id="pack-functions"></div> */}
            </div>
            <button type="submit">Submit</button>
            <button type="reset">Reset</button>
          </form>
        </section>
      </>
    );
  }
}