我有一個App使用兩個子組件的父組件 ( )Chart和Artists.
該Artists組件是使用semantic-ui-react庫創建的下拉串列。
我想要做的是將下拉選單放入它自己的組件 ( Artists) 中，該組件在更改時會更改artist父組件 ( App) 中的artist狀態，然后可以將該狀態App作為artistprop傳遞給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} />
)
}
uj5u.com熱心網友回復：
解決方案
出現此問題是因為您顯然還沒有將 CSS 添加到 HTML 樣式。
添加：
https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css
作為你的 react index.html 的樣式表。
沙盒：
這是一個沙箱，可以更好地幫助您：
https://codesandbox.io/s/semantic-ui-example-forked-mv3bv?file=/index.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/388682.html
標籤：javascript 反应 语义UI反应