如何：semantic-ui-react dropdown 将下拉选择分配给其他组件

Question

我有一个父组件 (App)，它使用两个子组件 Chart 和 Artists。

Artists 组件是使用 semantic-ui-react 库创建的下拉列表。

我想做的是将下拉列表放入其自己的组件 (Artists) 中，当更改时，将更改父组件中的 artist 状态 (App) 然后 App 中的 artist 状态可以作为 artist 属性传递给 Chart 组件

到目前为止一切正常，只是下拉菜单看起来很奇怪（选项在下拉框之外：如下图）。我不确定我的设置是否正确。

应用程序组件：

import './App.css';
import Chart from './Chart.js';
import {useState} from 'react';
import Artists from './Artists.js';

const artistOptions = [
  {
    text: 'Bruno Mars',
    value: 'Bruno Mars'
  },
  {
    text: 'Billie Eilish',
    value: 'Billie Eilish'
  }
  ...
]

export default function App() {

  const [artist, setArtist] = useState('Bruno Mars');

  const handleArtistChange = (artist) => {
    setArtist(artist);
  }

  return (
    <div className="App">
      <h2>Awards for {artist}</h2>
      <Artists options={artistOptions} onArtistChange={handleArtistChange}/>
      <Chart data={data} height={150} width={960} show={"Grammys"} artist={artist} />
    </div>
  );

}

艺术家部分：

import React from 'react';
import {Dropdown} from 'semantic-ui-react'

export default function Artists (props) {

    const handleOnChange = (e, data) => {
        props.onArtistChange(data.value);
    }

    return(
        <Dropdown placeholder='placeholder' search selection options={props.options} onChange={handleOnChange} />
    )
}

Answer 1

解决方案

出现此问题是因为您显然还没有将 CSS 添加到 HTML 样式。

添加：

https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css

作为您的反应的样式表 index.html。

沙盒：

这里有一个沙盒可以更好地帮助您：

https://codesandbox.io/s/semantic-ui-example-forked-mv3bv?file=/index.js

如何：semantic-ui-react dropdown 将下拉选择分配给其他组件

How To: semantic-ui-react drop down passing drop-down selection to other component

javascript

reactjs

semantic-ui-react

解决方案

沙盒：