如何显示突出显示的单词的下拉菜单

Question

所以在我的代码中，这些单词被突出显示了。在突出显示的单词中，我想显示一个下拉菜单，该菜单可以执行诸如更改文本颜色之类的操作。我还想知道如何为每个突出显示的单词显示动态单词。这些动态词将从 API 接收。无论如何，即使是静态的单词列表也不会显示在下拉菜单中。

代码的沙盒： https://codesandbox.io/s/affectionate-meninsky-tdqru

反应代码

import React, { Component } from "react";
import "./App.css";
const stripChars = word => word.replace(/[W_]+/g, "");
class App extends Component {
state = {
text: "The gun is a dangerous weapon, don't kill anyone",
highlight: ["gun", "kill"]
// text: "",
// highlight: []
};
componentDidMount() {
fetch("https://api.myjson.com/bins/1ep1fh")
.then(res => res.json())
.then(result => {
console.log(result);
let text = "";
let highlight = [];
for (const item of result) {
text += item.text + "n";
highlight = [...highlight, ...item.highlight];
}
this.setState({
text,
highlight
});
});
}
render() {
const { text, highlight } = this.state;
const words = text.split(" ");
return (
<div>
{words.map((word, i) => (
<span key={i}>
<span
id="new"
className={
highlight.includes(stripChars(word)) && "highlight dropbtn"
}
onClick="myFunction()"
>
{word}
</span>
&nbsp;
</span>
))}
<div id="myDropdown" class="dropdown-content">
<a href="#was">was</a>
<a href="#were">were</a>
<a href="#will">will</a>
</div>
</div>
);
}
}
export default App;

JavaScript 文件

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches(".dropbtn")) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains("show")) {
openDropdown.classList.remove("show");
}
}
}
if (event.target.tagName === "A") {
var color;
var _href = event.target.getAttribute("href");
switch (_href) {
case "#was":
color = "green";
break;
case "#were":
color = "Aqua";
break;
case "#will":
color = "Magenta";
break;
default:
color = "red";
}
document.getElementById("new").style.color = color;
}
};

CSS 文件

.App {
text-align: center;
}
.highlight {
background: red;
text-decoration: underline;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980b9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}

Answer 1

你不应该引用一个外部函数并在 react 中进行 DOM 操作来实现这一点。 您可以创建一个状态变量并根据单击的单词进行切换。下拉显示可以绑定到同一变量。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const stripChars = word => word.replace(/[W_]+/g, "");
class App extends Component {
state = {
text: "The gun is a dangerous weapon, don't kill anyone",
highlight: ["gun", "kill"],
displayDrop: false
// text: "",
// highlight: []
};
componentDidMount() {
fetch("https://api.myjson.com/bins/1ep1fh")
.then(res => res.json())
.then(result => {
console.log(result);
let text = "";
let highlight = [];
for (const item of result) {
text += item.text + "n";
highlight = [...highlight, ...item.highlight];
}
this.setState({
text,
highlight
});
});
}
render() {
const { text, highlight } = this.state;
const words = text.split(" ");
return (
<div>
{words.map((word, i) => (
<span key={i}>
<span
id="new"
className={
highlight.includes(stripChars(word)) && "highlight dropbtn"
}
onClick={() => this.setState({ displayDrop: true })}
>
{word}
</span>
&nbsp;
</span>
))}
{this.state.displayDrop && (
<div id="myDropdown" class="dropdown-content">
<a href="#was">was</a>
<a href="#were">were</a>
<a href="#will">will</a>
</div>
)}
</div>
);
}
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CSS：无需添加显示：无

.App {
text-align: center;
}
.highlight {
background: red;
text-decoration: underline;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980b9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}

上面的代码将处理下拉列表的显示。您也可以将选项保存在状态中，并根据以相同方式单击的元素更改选项。