javascript - 收到此错误... invariant.js:42 未捕获的错误：预期 `onClick` 侦听器是一个函数，而不是 `string` 类型的值

问题描述

好的，所以我正在制作一个允许用户构建测验（如 Buzzfeed 测验）的表单，但我不想限制用户必须拥有的问题数量。所以我想我可以在问题底部有一个“添加问题”按钮的地方做一些事情，让用户添加一个包含所有适当字段的问题。现在我只是在处理表单部分，我已经设置了逻辑来制作测验功能和东西，但是所有的测验细节（答案、问题等）都是硬编码的。我也不太了解（根本）如何做这些事情（html、js、react 等），所以如果其他任何东西看起来很时髦，我愿意接受一些提示。无论如何...这是我的代码。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

var questionNum = 1;

class App extends Component {
  render() {
    return (
      <div className="App">
        <div>
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
        </div>
        <form>
          Give your quiz a title:<br />
          <input type="text" name="quizTitle" /><br />
          Who's the author?<br />
          <input type="text" name="author" /><br />
          Now let's add some questions...<br />
          <form className="quesitons">
            <div id={"questions" + questionNum}>
              Question {questionNum}<br />
              <input type="text" name={"question" + questionNum}/><br />
              Answers<br />
              Check the box(es) for the correct answer(s).<br />
              <input type="checkbox" name={"question" + questionNum + "Answer1Box"} />
              <label for={"question" + questionNum + "Answer1"}><input type="text" name={"question" + questionNum + "Answer1"}/></label><br />
              <input type="checkbox" name={"question" + questionNum + "Answer2Box"} />
              <label for={"question" + questionNum + "Answer2"}><input type="text" name={"question" + questionNum + "Answer2"}/></label><br />
              <input type="checkbox" name={"question" + questionNum + "Answer3Box"} />
              <label for={"question" + questionNum + "Answer3"}><input type="text" name={"question" + questionNum + "Answer3"}/></label><br />
              <input type="checkbox" name={"question" + questionNum + "Answer4Box"} />
              <label for={"question" + questionNum + "Answer4"}><input type="text" name={"question" + questionNum + "Answer4"}/></label><br />
            </div>
            <div id="container"></div>
          </form>
        </form>
        <button id="addQuestionButton" onClick='addQuestion ()'>Add Question</button>
      </div>
    );
  }
}

function addQuestion () {
  questionNum++;
  console.log(questionNum + "that is the question number");

  var div = document.createElement('div');

    div.className = '{"questions" + questionNum}';

    div.innerHTML =
        'Question {questionNum}<br />\
        <input type="text" name={"question" + questionNum}/><br />\
        Answers<br />\
        Check the box(es) for the correct answer(s).<br />\
        <input type="checkbox" name={"question" + questionNum + "Answer1Box"} />\
        <label for={"question" + questionNum + "Answer1"}><input type="text" name={"question" + questionNum + "Answer1"}/></label><br />\
        <input type="checkbox" name={"question" + questionNum + "Answer2Box"} />\
        <label for={"question" + questionNum + "Answer2"}><input type="text" name={"question" + questionNum + "Answer2"}/></label><br />\
        <input type="checkbox" name={"question" + questionNum + "Answer3Box"} />\
        <label for={"question" + questionNum + "Answer3"}><input type="text" name={"question" + questionNum + "Answer3"}/></label><br />\
        <input type="checkbox" name={"question" + questionNum + "Answer4Box"} />\
        <label for={"question" + questionNum + "Answer4"}><input type="text" name={"question" + questionNum + "Answer4"}/></label><br />\
        ';

    document.getElementsByClassName('questions').appendChild(div);
}

export default App;

（我知道我的页面上有类似 React 的东西，它不是我的，但我认为它现在很可爱，所以我将把它留在那里，直到我让这个表单工作）当我按下“addQuestion”时出现这个错误按钮...

invariant.js:42 Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `string` type.

这不是整个错误（我会把它放在最后），但我不太确定如何解决这个问题。我也不太明白这意味着什么，所以如果有人能解释一下，那就太棒了。

这是完整的错误（哦，我在使用开发工具的 Google Chrome 中遇到了这个错误，但你可能已经知道了）

Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `string` type.
    at invariant (invariant.js:42)
    at getListener (react-dom.development.js:680)
    at listenerAtPhase (react-dom.development.js:981)
    at accumulateDirectionalDispatches (react-dom.development.js:1004)
    at traverseTwoPhase (react-dom.development.js:924)
    at accumulateTwoPhaseDispatchesSingle (react-dom.development.js:1020)
    at forEachAccumulated (react-dom.development.js:562)
    at accumulateTwoPhaseDispatches (react-dom.development.js:1063)
    at Object.extractEvents (react-dom.development.js:4396)
    at extractEvents (react-dom.development.js:697)
    at runExtractedEventsInBatch (react-dom.development.js:731)
    at handleTopLevel (react-dom.development.js:4476)
    at batchedUpdates$1 (react-dom.development.js:16659)
    at batchedUpdates (react-dom.development.js:2131)
    at dispatchEvent (react-dom.development.js:4555)
    at interactiveUpdates$1 (react-dom.development.js:16714)
    at interactiveUpdates (react-dom.development.js:2150)
    at dispatchInteractiveEvent (react-dom.development.js:4532)

谢谢！

标签： javascripthtmlreactjs

javascript - 收到此错误... invariant.js:42 未捕获的错误：预期 `onClick` 侦听器是一个函数，而不是 `string` 类型的值

问题描述

解决方案

推荐阅读