时间戳

首页 > 解决方案 > 传递对象数组时，如何从 typeahead 中获取 id 而不是 labelKey？

reactjs - 传递对象数组时，如何从 typeahead 中获取 id 而不是 labelKey？

问题描述

我的 react-bootstrap-typeahead 设置如下：

// MusicServices.jsx
import React, {Fragment, useState} from 'react';
import { Form } from 'react-bootstrap';
import { Typeahead } from 'react-bootstrap-typeahead';

const MusicServices = ({services}) => {
  const [musicServiceID, setMusicServiceSelection] = useState([]);
  const [transferDetailID, setTransferDetailSelection] = useState([]);

  const musicServiceDetails = Object.keys(services).map((serviceID) => {
    return {
        id: serviceID,
        name: services[serviceID].name
    }
  });

  const getTransferDetails = () => {
    let transferDetailSelections = []
    if (musicServiceID.length) {
      transferDetailSelections = services[musicServiceID[0].id].transferDetails;
    }
    return (
      <Form.Group>
         <Form.Label>Transfer Details</Form.Label>
         <Typeahead
          name="transferdetail"
          id="transfer-detail"
          labelKey="name"
          onChange={setTransferDetailSelection}
          options={transferDetailSelections}
          placeholder="Choose a Transfer Detail..."
          selected={transferDetailID}
         />
       </Form.Group>
    )
  }
  return (
    <Fragment>
      <Form.Group>
        <Form.Label>Music Services</Form.Label>
        <Typeahead
          name="musicservice"
          id="music-service"
          labelKey="name"
          onChange={(selected) => {
            setMusicServiceSelection(selected)
          }}
          options={musicServiceDetails}
          placeholder="Choose a music service..."
          selected={musicServiceID}
        />
      </Form.Group>
      {getTransferDetails()}
    </Fragment>
  );
};

export default MusicServices;

我使用相同的代码。几个地方，所以我把它提取到它自己的功能......

所以我以这样的形式使用它：

import React from 'react';
const Jumbotron = require('react-bootstrap').Jumbotron;
const Container = require('react-bootstrap').Container;
import Form from 'react-bootstrap/Form';
const Button = require('react-bootstrap').Button;

import MusicServices from '../../components/auth/MusicServices';


const Generate = ({services}) => {
  const handleSubmit = (event) => {
    const formEvent = event.currentTarget;
    console.log(event.target.elements)

    event.preventDefault();
    event.stopPropagation();
  };

  let mservices = {123455: {name: 'abc', transferDetails: [{id: 6789, name: 'der'}]}}

  return (
    <>
      <Jumbotron>
        <Container>
          <h1 className="display-3">Generate</h1>
          <p>{session.user.name}, this will generate a new key pair to be stored on the filestore and against a transfer detail.</p>
        </Container>
      </Jumbotron>
      <Container>
        <Form onSubmit={handleSubmit}>
          <Form.Group controlId="service">
            <MusicServices services={mservices}></MusicServices>
          </Form.Group>
          <Button variant="primary" type="submit">
            Generate key pair
          </Button>
        </Form>
      </Container>
    </>
  )
}

export default Generate

在我的handleSubmit()函数中，我想获取transfer-detail预先输入的值，但该值以“der”的形式返回。我真正想要的是“6789” id 值，“der”显示给用户以提前输入。

我看不出如何获得这个值。猜测它在 中transferDetailID，但在我的 Generate.jsx 页面中似乎没有。

标签： reactjsreact-bootstrap-typeahead

解决方案

useState挂钩需要在父级中并传递给子级，因此在这种情况下，它们需要从功能MusicServices组件中取出并放入Generate功能组件中。

然后，您必须将变量和 setter 都传递给孩子。所以在Generate功能组件中我更改了代码：

const Generate = ({services}) => {
  const [musicServiceID, setMusicServiceSelection] = useState([]);
  const [transferDetailID, setTransferDetailSelection] = useState([]);
  return (
    <>
      ...
      <Container>
        <Form onSubmit={handleSubmit}>
          <Form.Group controlId="service">
            {
              MusicServices(
                services,
                musicServiceID,
                setMusicServiceSelection,
                transferDetailID,
                setTransferDetailSelection
              )
            }
          </Form.Group>
        </Form>
       </Container>
       ...
    </>
  )
};

这然后允许handleSubmit函数访问 和 的musicServiceID状态transferDetailID。

推荐阅读