javascript - 如何获取元素的值以便在新元素中打印它们？

Question

我有一个卡片列表，其中包含有关经销商的一些信息，我需要设置一个功能来编辑该信息。所以，我有一张包含信息的卡片，例如:dealerName 和 cardId，如果您单击该卡片，应该打开一个模式，其中包含该人的完全相同的信息，但您可以编辑该信息。

export default class DealerChild extends Component {

  constructor (props) {
    super(props);
  }

  render () {
    let dealerInfo;
    if (this.props.dealerData) {
      let dealerProps = this.props.dealerData.dealersData;
      dealerInfo = dealerProps.map((dealer) => {
        return (<div>
              <Card>
                 // THIS IS THE CARD.
                // THIS IS THE INFO THAT CONTAINS THE CURRENT DEALER
                <CardHeader title={dealer.DealerName}
                            subtitle={dealer.CardId} />
              </Card>

              // THIS BUTTON OPENS THE MODAL
              <Button onClick={() => this._openUpdateDealer(dealer)}>

             // THIS IS THE MODAL

              <Dialog
                title="Update Dealer"
                ref="updateRef">
                <div>

          // THESE ARE THE FIELDS TO FILL WITH THE CURRENT INFO OF THE DEALER
                 <TextField ref="DealerNamePopup" />
                 <TextField ref="CardIdPopup" />
               </div>
              </Dialog>
            </div>
          );
      })
    }

    return (<Grid> {dealerInfo} </Grid>);
  }

  _openUpdateDealer = (dealer) => {
    console.log(dealer); // RETURNS THE INFO OF THE CURRENT DEALER
    this.refs.updateRef.show(); // THIS OPENS THE MODAL
    console.log(this.refs.DealerNamePopup); // RETURNS UNDEFINED
  }
}

console.log(dealer); 返回包含当前经销商信息的 JSON:

{
  DealerName: "Carmen",
  CardId: "23132123"
}

请查看代码中的注释，以便您逐步了解它的作用。

那么，如何在模态字段中打印当前经销商的信息？这与卡上的信息完全相同。

编辑

Here the library I am using, material-ui

Answer 1

我相信你做的有点不对。你有一个集合，你可以把它变成 React 组件的数组。并且您相对于该单个记录的组件创建 refs，而不是相对于 _openUpdateDealer 方法所在的整个 DealerChild。因此，为了访问那些refs，您可以:

dealerInfo[0].refs.DealerNamePopup

您需要在创建 react 组件数组时添加索引变量并将其传递给您的 _openUpdateDealer(index, dealer) 然后执行 dealerInfo[index].refs.DealerNamePopup 。

或者只是为这些记录创建一个新的 React 类并将 _openUpdateDealer 方法移到那里。