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();
}

写道：

未捕获的TypeError：this._removeTodo不是函数在HTMLButtonElement.onclick（（索引）：1） onclick @（index）：1

Answer 1

使用虚拟dom的Reactjs，这将创建一个基于jsx的对象树并在UI上呈现。这里DOM操作完全不建议使用jQuery。如果你想根据条件显示数据，可以在状态或道具等反应对象上执行，不要尝试使用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>
    )
  }
}

为什么它不是功能反应

1 个答案: