通过对象数组时，如何从typeahead获取id而不是labelKey？

如何解决通过对象数组时，如何从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;

我使用相同的代码ina。几个地方，所以我将其提取出来以实现其自身功能...

所以我以这种形式使用它：

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”。我真正想要的是id值“ 6789”，并向用户显示“ der”以预先输入。

我看不到如何获得该值。猜想它在transferDetailID中，但是在我的Generate.jsx页面中似乎不可用。

解决方法

sectionTableSchema.txt钩子必须位于父级中并传递给子级，因此在这种情况下，它们需要从useState功能组件中取出并放入{{1} }功能组件。

然后，您必须将变量和设置器都传递给子代。因此，在MusicServices功能组件中，我更改了代码：

Generate

然后，这允许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的状态。