Question

如何根据条件将附加事件添加到jsx＆＃39; s元素？下面的例子没有这样做，它只是将一个标志传递给onClick函数，并没有真正附加事件。

const { hasSomething, name } = this.props 

render(){
   return(
     <div onClick={()=>{hasSomething && this.fireSomething()}}>{name}/div> 
   )
}

我可以复制2 <div>，检查是否存在hasSomething然后将其附加到其中一个元素，但这对我来说是一个不好的重复，因为{name}被声明了两次。

Answer 1

怎么样：

render(){
   return(
      <div onClick={hasSomething && this.fireSomething}>{name}/div> 
   )
}

如果hasSomething附加了聆听者，则onClick会收到未定义，就像您不会传递任何内容一样。

如果以上不是您要找的东西，您也可以这样做：

render(){
   const props = {
     //... some props
   }

   if(hasSomething) {
     props.onClick = this.fireSomething;
   }

   return(
      <div {...props}>{name}/div> 
   )
}

您创建一个对象，该对象包含应传递给div的每个prop，然后使用spread运算符传递它们。

Answer 2

如果需要引用props / state，还记得将函数绑定到this。我倾向于在建筑中这样做，即 this.fireSomething = this.fireSomething.bind(this)

Answer 3

我的方法是创建一个新的道具对象newProps，根据onClick是否具有必需属性，可能有也可能没有this.props属性。

在此示例中，如果Foo未收到bar道具，则无法创建具有onClick属性的新对象。

class Foo extends Component {
  handleBar() {
    console.log(this.props.bar);
  }

  render() {
    const newProps = this.props.bar
      ? {
        ...this.props,
        onClick: this.handleBar.bind(this),
      }
      : this.props
    return <div { ...newProps }/>
  }
}

这里是live example on CodePen

Answer 4

等等，如果条件满足，您只想调用方法？在这种情况下，你可以这样做：

render() {
  return(
    <div onClick={() => {
      if (hasSomething) {
        this.fireSomething()
      }
    }}
  )
}

或

fireSomething() {
  if (hasSomething) {
    // do logic
  }
}

render() {
  return(
    <div onClick={() => this.fireSomething()}
  )
}

根据条件反应添加事件监听器

4 个答案: