Как динамически визуализировать пользовательские данные в компоненте по нажатию кнопки в React

Question

Я новичок в React и застрял на том, как мне этого добиться.

После того, как пользователь заполняет поле CEP с первой карты и нажимает кнопку «Gravar Dados», он показывает вторую карту со всей информацией с первой карты.

Шаблон изображения

Новое изображение результата

Мне нужно динамически создать еще одну карту под второй картой с новой информацией от первой карты.

Это то, что я сделал до сих пор ..

У меня есть этот компонент DadosPessoais.js какая вторая карта в шаблоне Изображение:

render() {
    return (
        <div className="card shadow mt-5" >
            <div className="card-header">
                <span>Dados Pessoais </span>
            </div>
            <div className="card-body">

                <div className="row">

                    <div className="col-4">

                        <div>
                            <span>Cep: <strong>{this.props.cep}</strong></span>
                        </div>
                        <div>
                            <span>Bairro: <strong>{this.props.bairro}</strong></span>
                        </div>

                    </div>

                    <div className="col-5">

                        <div>
                            <span>Rua: <strong>{this.props.rua}</strong></span>
                        </div>
                        <div>
                            <span>Cidade: <strong>{this.props.cidade}</strong></span>
                        </div>

                    </div>

                    <div className="col-3">

                        <div>
                            <span>UF: <strong>{this.props.uf}</strong></span>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    );
}

В моем Home.js есть форма с onSubmit, которая вызывает mostrarDadosPessoais функцию:

Функция:

      mostrarDadosPessoais(e) {
    e.preventDefault();

    this.setState({
      listaDados: this.state.listaDados.concat({
        cep: e.target.value,
        rua: e.target.value,
        bairro: e.target.value,
        cidade: e.target.value,
        uf: e.target.value,
      }),
    });
  }

И мои компоненты ввода UserInput, должно ли это быть так?:

            <div className="col-3">
              <UserInput name="Rua" Label="Rua" Id="Rua" value={this.state.rua} Disabled />
            </div>

            <div className="col-3">
              <UserInput name="Bairro" Label="Bairro" Id="Bairro" value={this.state.bairro} Disabled />
            </div>

            <div className="col-3">
              <UserInput name="Cidade" Label="Cidade" Id="Cidade" value={this.state.cidade} Disabled />
            </div>

            <div className="col-1">
              <UserInput name="UF" Label="UF" Id="UF" value={this.state.uf} Disabled />
            </div>

И чтобы показать карту результата, я сделал это:

<div className="col-md-4">
        {this.state.listaDados.length === 0
          ? null
          : this.state.listaDados.map((lista) => (<DadosPessoais {...lista} />))}
      </div>

Это мой state:

this.state = {

  listaCidade: [],

  listaDados: [],
}

Любые идеи о том, как я могу создать другой компонент и сохранить значения из первого?

Спасибо.

Answer 1

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

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

class StateContainer extends Component {
   constructor() {
      super(props);
      this.state = {
         addresses: [],
      }
   }

   mostrarDadosPessoais(e) {
      e.preventDefault();
      this.setState({
         listaDados: this.state.listaDados.concat({ 
            cep: e.target.cep.value,
            rua: e.target.rua.value,
            // etc, etc
         }),
      })
   }
   render() {
      return (
      <div>
         <form handleSubmit={this.mostrarDadosPessoais}>
            {/* left-side form */}
            <input name="msg" />
            <button type="submit"></button>
         </form>
         <div>
            {/* right-side list of elements */}
            {this.state.addresses.length === 0 
               ? null 
               : this.state.addresses.map(
                  (address) => (<DadosPessoais {...address} />)
                 )
             }
         </div>
      </div>
      );
   }
}