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

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

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

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

1 个答案: