反应TypeError：无法读取未定义的属性'bind'

Question

        <div className="questions" id="questions">
          {Array(this.state.numQuestions).fill().map((number, questionIdx) => {
            return (
              <div> 
                <label>Question</label>
              <input type="text" onChange={this.handleQuestionChange.bind(questionIdx)}  />
              </div>);
          Array(4).fill().map((number, index) => {
          return <input type="text" key={index} onChange={this.handleAnswerChange.bind(questionIdx)}  />
          })}
          )
          })}
        </div>

I am getting a strange error for the line <input type="text" onChange={this.handleQuestionChange.bind(questionIdx)} />

I'm not quite sure what the error means let alone how to fix it, here's the error information:

TypeError: Cannot read property 'bind' of undefined

Thanks!

Answer 1

It means that this.handleQuestionChange is undefined, so you can't call bind() (or anything else) on it.

Check your object / functions and make sure it exists.

Answer 2

I prefer the arrow function, it's more elegant. Just simply define it like:

 const handleAnswerChange = (index) => { // do anything you like console.log(index) } 

Then you don't have to bind your function. It's already worked.