如何在React中单击按钮时动态呈现组件中的用户数据

Question

我是React的新手并且陷入困境，我怎么能实现这个目标。

用户从第一张卡片填写CEP字段并单击“Gravar Dados”按钮后，它会显示第二张卡片，其中包含第一张卡片中的所有信息。

Template Picture

New Result Picture

我需要的是动态创建另一张卡，在第二张卡下使用第一张卡中的新信息。

这就是我到目前为止所做的......

我有这个组件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>
      );
   }
}