Question

我的项目中有添加和删除按钮。为了保持我的代码组织我试图用它们两个调用相同的函数，并使用refs查看哪一个被点击：

  addOrRemoveSet(e) {
    e.preventDefault();
    if (this.addOrRemoveSetTest === 'remove') {
      // do something
    } else {
      // do something else 
    }

  }

    <form onSubmit={this.addOrRemoveSet}>
      <button
        ref={() => this.addOrRemoveSetTest = 'remove'}
      >Remove
      </button>
      <button
        ref={() => this.addOrRemoveSetTest = 'add'}
      >Add
      </button>
    </form>

addOrRemoveSetTest始终等于'add'。我假设两个ref函数都在提交时运行？这必须是一个常见的问题需要解决，那么有一个被认为是最佳实践的解决方案吗？

Answer 1

是的，它始终是，这就是代码流动的方式：

// first this will be executed
ref={() => this.addOrRemoveSetTest = 'remove'} 

// then this , so the value will always stay add
ref={() => this.addOrRemoveSetTest = 'add'}

您的代码应该是：

onClick = {() => this.addOrRemoveSetTest = 'remove'}
// AND
onClick = {() => this.addOrRemoveSetTest = 'add'}

以下是工作示例的链接：

https://stackblitz.com/edit/react-add-remove-single

Answer 2

为什么它的价值，为什么你会使用ref切换函数内部的功能，为什么不在button标记内使用name属性，所以你的代码就像这样：

    addOrRemoveSet(e) {
const name = e.target.name;
e.preventDefault();
if (name === 'remove') {
// do something
} else {
// do something else 
}
}

<form onSubmit={this.addOrRemoveSet}>
  <button
    name='remove'
    onClick={this.addOrRemoveSet} //check here
  >Remove
  </button>
  <button
    name='add'
    onClick={this.addOrRemoveSet} //check here
  >Add
  </button>
</form>

React中的Plus和Minus按钮调用相同的功能？

2 个答案: