我正在使用 Open Trivia Database API 制作一个 React 问答游戏,我正在尝试获取它,因此有一个选择器按钮,当它下拉时,它会向您显示一个类别列表,当您单击它时,它会给你一个来自上述类别的问题。我觉得我已经很接近了,但只是缺少一 block ,想知道是否有人能发现它或者只是为我指出正确的方向?预先感谢您的时间和帮助。
这是我的 app.js 代码:
import React from 'react'
import './App.css'
// import axios from 'axios'
import Questions from './components/questions'
import Categories from './components/categories'
import categorySelector from './components/categorySelector'
class App extends React.Component {
constructor (props) {
super(props)
this.state = {
questions: [],
categories: []
// score: 0,
}
}
render () {
return (
<div className='App'>
<h2>Trivia Game</h2>
<categorySelector
categories={Categories}
onSelect={event => this.questions(event.target.value)}
/>
</div>
)
}
}
export default App
这是我的categorySelector.js 代码:
import React from 'react'
class categorySelector extends React.Component {
render () {
const { categories, onSelect } = this.props
return (
<div class='categorySelector'>
<select
value={categories} onChange={onSelect}
>
<option value=''>-- No category selected --</option>
{categories.map(category => (
<option value={category} key={category.id}>{category.name}</option>
))}
</select>
</div>
)
}
}
export default categorySelector
最佳答案
看起来 select 标签没有使用 value 属性:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
我修改了您的返回声明如下
- 将“class”更改为“className”,因为 class 是 Reactjs 中的保留关键字
- 从选择标签中删除了 value 属性
- 将选项标签中的 value 属性更新为类别名称而不是对象
return (
<div class='categorySelector'>
<select onChange={onSelect}>
<option value=''>-- No category selected --</option>
{categories.map(category => (
<option value={category.name} key={category.id}>{category.name}</option>
))}
</select>
</div>
)
我还建议使用大写的 React 类名称,例如 CategorySelector 而不是 CategorySelector。
应用程序组件中有几个拼写错误
您将类别组件作为 prop 传递,而不是传递状态的类别切片。
在 onSelect 事件中, this.questions(...) 意味着您正在调用一个方法。但是,您似乎没有编写问题方法。 相反,如果您想“保存”问题列表中选定的类别,您可以像这样调用 setState:
括号内的代码添加所选值,而不删除先前的选择。
<categorySelector categories={this.categories} onSelect={event => this.setState({questions: [...this.state.questions, event.target.value]})} />
关于javascript - 如何让选择器在 React 中处理问答游戏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62564665/