javascript - 如何绑定(bind)函数而不是创建新函数？

Question

我是新来的 react 。这里我有一个功能组件。其中我有

const bginfo = useLocalStore(() => ({
      status: bgStatus,
      setStatus(val) {
        bginfo.status = val;
      }
    }));
return (
  <div className={css.root}>
    <Select
      onChange={(event) => bginfo.setStatus(event.target.value)}
      value={bginfo.status}
      id="bgStatus"
    />

所以，在此，现在我不想创建新实例，而是 bind function here instead of creating new instance.

我该怎么做？谁能帮我解决这个问题吗？

Answer 1

创建一个新函数并传递给onChange，如果您将其与onChange/onClick一起使用，它会自动传递事件

setStatus = (event) => {
  bginfo.setStatus(event.target.value);
}

<Select
  onChange={setStatus}
  value={bginfo.status}
  id="bgStatus"
/>

这是来自 React docs 的官方示例

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}