Javascript 使用两个参数时绑定奇怪的错误

Question

考虑以下示例

export default function App() {
  const newFunction = (valueOne, valueTwo) => {
    console.log('valueOne:', valueOne, 'valueTwo:', valueTwo)
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={newFunction.bind(this, 1)}> Bind (single param) </button>
      <br />
      <button onClick={newFunction.bind(this, 1, 2)}>Bind (two params) </button>
    </div>
  );
}

这里的 React 应用程序有 onClick 事件，其中 newFunction 会在每次单击按钮元素时调用。传递参数.bind()已被使用

每当为 newFunction 传递两个参数时，输出都会按预期打印在控制台中。例如：newFunction.bind(this, 1, 2) 输出到 => valueOne: 1 valueTwo: 2

问题：然而，在传递单个参数 newFunction.bind(this, 1) 时，输出如下所示，

valueOne: 1
valueTwo: SyntheticBaseEvent {_reactName: "onClick", _targetInst: null, type: "click", nativeEvent: PointerEvent, target: HTMLButtonElement…}
_reactName: "onClick"
_targetInst: null
type: "click"
nativeEvent: PointerEvent
target: 
<button> Bind (single param) </button>
currentTarget: null
eventPhase: 3
bubbles: true
cancelable: true
timeStamp: 12358.5
defaultPrevented: false
isTrusted: true
view: Window
detail: 1
screenX: 2017
screenY: 328
clientX: 571
clientY: 97
pageX: 571
pageY: 97
ctrlKey: false
shiftKey: false
altKey: false
metaKey: false
getModifierState: ƒ modifierStateGetter() {}
button: 0
buttons: 0
relatedTarget: null
movementX: 0
movementY: 0
isDefaultPrevented: ƒ functionThatReturnsFalse() {}
isPropagationStopped: ƒ functionThatReturnsFalse() {}
preventDefault: ƒ preventDefault() {}
stopPropagation: ƒ stopPropagation() {}
persist: ƒ persist() {}
isPersistent: ƒ functionThatReturnsTrue() {}
<constructor>: "SyntheticBaseEvent"

newFunction.bind(this, 1) 的预期输出应该是 valueOne: 1 valueTwo: undefined，因为第二个参数不存在。相反，它的行为方式不同。

Codesandbox URL：https://v12ek.csb.app/（转到开发人员工具中的控制台选项卡以查看输出）

Answer 1

这里的问题是，如果你只绑定一个参数，第二个参数就是点击事件

const newFunction = (valueOne, valueTwo) => {
    console.log('valueOne:', valueOne, 'valueTwo:', valueTwo)
  };
  
  const fakeEvent = {event: 'click'}
  
 newFunction.bind(this, 1, 2)(fakeEvent) //this works
 
 newFunction.bind(this, 1)(fakeEvent)
 
 newFunction.bind(this, 1, undefined)(fakeEvent) //this works

Answer 2

这不是错误。

考虑 newFunction.bind(this, 1, 2),

与绑定一起传递的参数 (1, 2) 和调用返回函数时传递的参数 (newFunction.bind(this, 1, 2) returns 一个用 'click' 单击按钮时的事件）组合并传递给 newFunction.

您没有看到 newFunction.bind(this, 1, 2) 的事件，因为 newFunction 只接受两个参数。如果修改为取另一个，你也可以看到本例中的事件。

const newFunction = (valueOne, valueTwo, valueThree) => {
    console.log(valueOne, valueTwo, valueThree); // valueThree will be the event
};

Javascript 使用两个参数时绑定奇怪的错误

Javascript bind weird bug while using two parameters

javascript

ecmascript-5

reactjs