时间戳

首页 > 解决方案 > Javascript - 基于字符串执行函数

javascript - Javascript - 基于字符串执行函数

问题描述

我正在尝试将以下函数与 2 个输入实例（name='Password'，name='Email'）一起使用，具体取决于输入元素“name”属性（“Password”或“Email”）中指定的名称，基于我想执行相关功能（setPassword() 或 setEmail）。我可以这样做，但是，我相信会有一种更优雅/更聪明的方式来做到这一点。

const handleChange = event => {
        const { value, name } = event.target;

        if (name === 'Password') {
            setPassword(value);
        }
        
        if (name === 'Email' ) {
            setEmail(value);
        }

}

我可能在追求这样的事情：

   `set${name}(${value})`

执行这样的事情可能吗？如果是这样，这仍然是一种好习惯，还是我应该坚持上面冗长但明确的“如果”陈述？

标签： javascript

解决方案

方法一

如果您正在寻找优雅，您可以使用这样的简写 if 语句：

const handleChange = event => {
  const { value, name } = event.target;
      
  name === 'Password' && setPassword(value);
  name === 'Email' && setEmail(value);
}

方法二

如果您想要更多的动态方法，您可以创建一个包含您的函数的对象，这样输入无法执行执行您定义但不应该运行的操作的函数。

// This should only contain methods that you allow to run dynamically

class InputWrapper {
  setPassword() {
    // Sets the password
  }
  setEmail() {
    // Sets the email
  }
}

接下来我们可以通过创建上述类的实例来处理这个问题。这样我们就不会在类之外运行函数。如果类中的函数不存在，则不会执行任何操作。

const handleChange = event => {
  try {
    const { value, name } = event.target;
    const handler = new InputWrapper();
    handler[`set${name}`](value);
  } catch (e) {
    console.error(e);
  }
}

推荐阅读