javascript - 为什么它不是一个 React 函数

Question

我编写了这段代码，并创建了构造函数方法

constructor(props) {
  super(props)

  this._addTodo = this._addTodo.bind(this);
  this._searchBar = this._searchBar.bind(this);
  this._removeTodo = this._removeTodo.bind(this);
}

然后这个函数:

_addTodo() {
  var data = test.map(x => [x.name, x.price, ]);
  var searchField = $('.objectName').val();
  data.map(function(theTrue) {
    if (searchField === theTrue[0]) 
    {
      $('.objects')
      .append('<div class = "box"> <i className = "hvhv">' + $('.quantityObject').val() + ' </i><i> ' + $('.objectName').val() + ' </i><i> ' + $('.priceValue').text() + '</i><button onClick={this._removeTodo()} className="removeTodo">Remove</button></div>');
    }
  })
}

当我调用这个函数时一切都很顺利

<button className="addItem" onClick={this._addTodo}>Add</button>

但是当我调用这个函数时:

_removeTodo(){
   console.log('work');
   $( ".box" ).remove();
}

上面写着:

Uncaught TypeError: this._removeTodo is not a function at HTMLButtonElement.onclick ((index):1) onclick @ (index):1

Answer 1

Reactjs 使用虚拟 dom，这会创建一个基于 jsx 的对象树并在 UI 上渲染。这里完全不建议使用 jQuery 进行 DOM 操作。如果您想根据条件显示数据，请在 state 或 props 等 ReactJS 对象上执行此操作，不要尝试使用 jQuery 删除元素。

这是一个如何仅使用 Reactjs 添加和删除元素的示例

class App extends Component {
  state = {
    todo: [],
    name: '',
    quantity: '',
    price: '',
  }

  constructor(props) {
    super(props)

    this._addTodo = this._addTodo.bind(this);
    this._removeTodo = this._removeTodo.bind(this);
  }

  _addTodo(e) {
    e.preventDefault()

    const { todo, name, quantity, price } = this.state

    const newTodo = {
      name,
      quantity,
      price,
      id: Date.now(),
    }

    this.setState({
      todo: [...todo, newTodo],
    })
  }

  _removeTodo(item) {
    const { todo } = this.state

    let index

    index = todo.findIndex(x => x.id === item.id)
    todo.splice(index, 1)

    this.setState({
      todo,
    })
  }

  render() {
    return (
      <div>
        <form onSubmit={this._addTodo}>
          <input type="text" placeholder="Name" value={this.state.name} onChange={e => this.setState({name: e.target.value})} />
          <input type="text" placeholder="Quantity" value={this.state.quantity} onChange={e => this.setState({quantity: e.target.value})} />
          <input type="text" placeholder="Price" value={this.state.price} onChange={e => this.setState({price: e.target.value})} />
          <button type="submit" onClick={this._addTodo}>Add</button>
        </form>
        <hr />
        <div>
          {this.state.todo.map(item => (
            <div className="box">
              <i className="hvhv">{item.quantity}</i>
              <i> {item.name} </i>
              <i>{item.price}</i>
              <button type="button" onClick={() => this._removeTodo(item)} className="removeTodo">Remove</button>
            </div>
          ))}
        </div>
      </div>
    )
  }
}