Fatal编程技术网
  • javascript/
  • Javascript 在render函数-ReactJS中调用函数？

Javascript 在render函数-ReactJS中调用函数？

javascript reactjs

Javascript 在render函数-ReactJS中调用函数？,javascript,reactjs,Javascript,Reactjs,好的，我正在制作一个“buzzfeed”测验生成器，我的表单中有一个问题。因此，每个问题都有两个不同的部分，一个“问题”和“答案”。始终会有4个答案，但我希望跟踪稍后检查的答案，因此我希望给每个答案一个唯一的id“问题”+questionNum+“答案”+answerNum或“问题”+questionNum+“答案”+i所以我做了这个应答器生成器函数，它应该给我4个独特的答案选择填充，让用户输入特定问题的答案（现在它说了一些关于条款和条件的内容-忽略我只是暂时保留它，因为我在遵循教程）。以下是我

好的，我正在制作一个“buzzfeed”测验生成器，我的表单中有一个问题。因此，每个问题都有两个不同的部分，一个“问题”和“答案”。始终会有4个答案，但我希望跟踪稍后检查的答案，因此我希望给每个答案一个唯一的id
“问题”+questionNum+“答案”+answerNum
或
“问题”+questionNum+“答案”+i
所以我做了这个
应答器生成器
函数，它应该给我4个独特的答案选择填充，让用户输入特定问题的答案（现在它说了一些关于条款和条件的内容-忽略我只是暂时保留它，因为我在遵循教程）。以下是我的全部代码：

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

var questionNum = 1;
var answerNum = 1;

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      quizTitle: "",
      author: "",
      question: "",
      terms: false,
      test: "",
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state);
  }

  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>

        <div className="container">
          <div className="columns">
            <div className="formDiv">
              <form className="form" onSubmit={this.handleSubmit}>
                <div className="field">
                  <label className="label">Give your quiz a title.</label>
                  <div className="control">
                    <input
                      className="input"
                      type="text"
                      name="quizTitle"
                      value={this.state.quizTitle}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="field">
                  <label className="label">Who's the Author?</label>
                  <div className="control">
                    <input
                      className="input"
                      type="text"
                      name="author"
                      value={this.state.author}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="questions" id="questions">
                  <div className="question" id={'questionGroup' + questionNum}>
                    <div className="field">
                      <label className="label" id={'question' + questionNum}>Question {questionNum}</label>
                      <div className="control">
                        <input
                          className="input"
                          type="text"
                          name='question'
                          value={this.state.question}
                          onChange={this.handleChange}
                        />
                      </div>
                    </div>

                    <div className="answersDiv">
                    <label className="label">Answers</label>
                      <div className="field">
                        <div className="control">
                          <label className="checkbox">
                              {this.answersGenerator()}
                          </label>
                        </div>
                      </div>
                    </div>

                </div>
              </div>
              <div className="field">
                  <div className="endButtons">
                    <button id="addQuestionButton"
                      onClick={addQuestion}>Add Question</button>
                    <input
                      type="submit"
                      value="Submit"
                      id="submitButton"
                      className="button is-primary"
                    />
                  </div>
              </div>
              </form>
          </div>

            <div className="column is-3">
              <pre>
                <code>
                  <p>Quiz Title: {this.state.quizTitle}</p>
                  <p>Author: {this.state.author}</p>
                  <p>Question: {this.state.question}</p>
                  <p>Terms and Condition: {this.state.terms}</p>
                  <p>Do you test?: {this.state.test}</p>
                </code>
              </pre>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function answersGenerator () {

  console.log("hello this is answer generator");
  var div = document.createElement('div');
  div.className = 'answers' + {questionNum};

  for (var i = 1; i < 5; i++){

    div.innerHTML = 
      '<div className="field">\
      <div className="control">\
        <label className="checkbox">\
        <label className="label">Answers</label>\
            <input\
              name="terms"\
              type="checkbox"\
              id="question'+{questionNum}+'Answer'+{i}+'"\
              checked={this.state.terms}\
              onChange={this.handleChange}\
            />\
            I agree to the{" "}\
            <a href="https://google.com">terms and conditions</a>\
        </label>\
      </div>';
    document.getElementsByClassName('answersDiv')[0].appendChild(div)
  }
}


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

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

    div.className = "questions" + questionNum;

    div.innerHTML =
        '<div id="questionGroup'+{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" id= />\
        <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>';

      document.getElementsByClassName('questions')[0].appendChild(div)


}


export default App;
); } } 函数应答器生成器（）{ log（“你好，这是应答生成器”）； var div=document.createElement（'div'）； div.className='answers'+{questionNum}； 对于（变量i=1；i<5；i++）{ div.innerHTML= '\ \ \ 答复\ \ 我同意{“}\ \ \ '; document.getElementsByClassName（'answersDiv'）[0]。appendChild（div） } } 函数addQuestion（）{ 问题数++； log（questionNum+“这是问题编号”）； var div=document.createElement（'div'）； div.className=“questions”+questionNum； div.innerHTML= '\ 问题'+{questionNum}+'
\
\ 答案
\ 请勾选框以获取正确答案。
\ \
\ \
\ \
\ \
\ '; document.getElementsByClassName（'questions'）[0]。appendChild（div） } 导出默认应用程序； 这里有一些事情可以忽略，我只是不确定你需要多少信息。所以问题是，当我在我的
render
函数中调用我的
answersGenerator
函数时，我得到了一个错误。这里是错误
未捕获类型错误：this.answersGenerator不是一个函数


        <div className="answersDiv">
        <label className="label">Answers</label>

                  {answersGenerator()}

        </div>



不过，我还是遇到了同样的错误。
乍一看，您似乎还没有在
应用程序
类中定义
answersGenerator（）
函数

因此，
这个.answersGenerator（）不存在


尝试只使用
answersGenerator（）
而不使用
this
您收到错误，因为
answersGenerator（）
不是类
应用程序的方法，因此，您不能使用
this
引用它。如果要这样做，请将函数移动到组件内部，如下所示：


this.handleChange = this.handleChange.bind(this);


提示：

如果您不想总是绑定函数，例如：


handleChange = (event) => { // the implementation }


声明您的方法，如：


handleChange(event) { // the implementation }


而不是


answersGenerator => () {
    console.log("hello this is answer generator");
    var answers = []
    for (var i = 1; i < 5; i++){
      answers.push(
        <div className="field">
          <div className="control">
            <label className="checkbox">
               <label className="label">Answers</label>
               <input
                 name="terms"
                 type="checkbox"
                 id=`question${questionNum}Answer${i}`
                 checked={this.state.terms} 
                 onChange={this.handleChange}
               />
               I agree to the{" "}
               <a href="https://google.com">terms and conditions</a>
           </label>
         </div>
       );
    } 
    return <div className=`answer${questionNum}`> {answers.map(answer => answer)} </div>
}



（）=>{}
，称为
箭头函数
，为您的用户执行绑定

编辑

您正在使用React进行开发，它支持在代码中创建
HTML
。因此，您可以创建一个答案数组，然后返回一个
div
，并在其中映射答案。
映射
将获取每个
答案
，并在
div
中进行渲染。尝试按以下方式定义您的方法：


answersGenerator=>（）{
log（“你好，这是应答生成器”）；
var answers=[]
对于（变量i=1；i<5；i++）{
回答，推(
答案
我同意{“}
);
} 
返回{answers.map（answer=>answer）}
}

请将错误添加到您的问题中错误是什么？很抱歉，我添加了错误我尝试了没有“this”的错误这就是我现在遇到的错误
uncaughttypeerror:cannotread属性'appendChild'of undefined
Ok，所以我从底部取下了
answersGenerator
函数，并将其添加到
App
中，在
render
函数之前，如下：（下一条注释）
answersGenerator=（）=>{//this.answersGenerator（）函数所做的工作}
，然后在呈现函数中调用它
但我仍然会遇到这个错误
未捕获类型错误：无法读取未定义的属性'appendChild'
这是因为
文档。getElementsByClassName
在ReactJS中不起作用。看看啊，好吧。我已经查看了链接的问题，但我不熟悉
ReactDOM.findDOMNode（组件）
的工作原理

handleChange(event) { // the implementation }



answersGenerator => () {
    console.log("hello this is answer generator");
    var answers = []
    for (var i = 1; i < 5; i++){
      answers.push(
        <div className="field">
          <div className="control">
            <label className="checkbox">
               <label className="label">Answers</label>
               <input
                 name="terms"
                 type="checkbox"
                 id=`question${questionNum}Answer${i}`
                 checked={this.state.terms} 
                 onChange={this.handleChange}
               />
               I agree to the{" "}
               <a href="https://google.com">terms and conditions</a>
           </label>
         </div>
       );
    } 
    return <div className=`answer${questionNum}`> {answers.map(answer => answer)} </div>
}