javascript - 如何让选择器在 React 中处理问答游戏?

标签 javascript reactjs

我正在使用 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/

相关文章:

javascript - 为什么该值没有发送到控制台?

javascript - 从 Javascript 对象获取 CSV 值

javascript - 我如何通过vue路由器传递自定义属性

css - handsontable 中的自定义渲染器或条件样式

reactjs - redux 连接组件如何知道何时重新渲染?

javascript - 在 fb js sdk 中重新请求被拒绝的权限

javascript - SortableJS - 不能将项目排除在可拖动和可排序之外

javascript - 如何更新状态中存在的 JSX 元素的状态?

javascript - 如何在 gatsby 中获取布局文件中的路径名

reactjs - 如何在每次单击按钮时渲染 react 组件?