javascript - ReactJS应用程序正确处理输入值

一切似乎都在我的待办事项列表上起作用，除了当我键入任务并点击提交按钮以添加任务时，我得到cannot read property 'bind' of undefined

我在这里做错了什么？

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class Todo extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      name: 'Simple React TODO list',
      count: 0,
      tasks: ['just', 'simple', 'thing']
    }
    this.handleClick = this.handleClick.bind(this)
    this.handleClickIndex = this.handleClickIndex.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  handleClick(event){
    eval(this[event.target.name]).bind(this)(event)
  }
  handleClickIndex(index, event){
    eval(this[event.target.name]).bind(this)(index, event)
  }
  handleChange(event){
    eval(this[event.target.name]).bind(this)(event)
  }
  handleSubmit(event){
    event.preventDefault()
    eval(this[event.target.name]).bind(this)(event)
  }
  task(event) {
    this.setState({task:event.target.value})
  }
  addTask(event) {
    if (!this.state.task) return
    const tasks = this.state.tasks || []
    tasks.push(this.state.task)
    this.setState({tasks:tasks, task:''})
  }
  removeTask(index, event) {
    const tasks = this.state.tasks
    tasks.splice(index, 1)
    this.setState({tasks})
  }
  render(){
    const tasks = (this.state.tasks||[]).map((task,index)=>(
      <li>
        {task} <button name="removeTask" onClick={event=>this.handleClickIndex(index,event)}>x</button>
      </li>
    ))
    return (
      <div className="container">
        <h1>{this.state.name}</h1>
        <div>
          <ol>
            {tasks}
            {
              this.state.task &&
              <li>{this.state.task}</li>
            }
          </ol>
          <div>
            <form name="sendTask" onSubmit={this.handleSubmit}>
              <input name="task" value={this.state.task} onChange={this.handleChange}/>
              <button type="submit" name="addTask" onClick={this.handleClick}>Add</button>
            </form>
          </div>
          <div style={{marginTop:'1rem'}}>
            <h5>Notes</h5>
            <ul>
              <li>See Angular 7 version <a href="https://codepen.io/mjunaidi/pen/VOpzga" target="_blank" title="Open in new tab">here</a></li>
              <li>See version 2.0 <a href="https://codepen.io/mjunaidi/pen/MZKZOZ" target="_blank" title="Open in new tab">here</a></li>
            </ul>
          </div>
        </div>
      </div>
    )
  }
}

render(
  <Todo/>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.3.0/react-dom.min.js"></script>

<div id="root"></div>

最佳答案

你为什么要使用eval？只需调用this.addTask。您的错误与未定义addTask有关，相反，应将addTask函数称为this.addTask。

最好在handleClick函数中调用this.addTask或将addTask直接传递给onClick事件。

关于javascript - ReactJS应用程序正确处理输入值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57480714/