代码之家 › 专栏 › 技术社区 › forsvunnet

如何在esnext中将键传递给函数?

wordpress-gutenberg ecmascript-next wordpress javascript

forsvunnet · 技术社区 · 8 年前

我正在为WordPress编写一个Gutenberg块插件,但是我在使用新的ESNext语法时遇到了麻烦。我有一个带有键的字段列表:值对。下面是我的代码,它正在工作:

{
  ...
  edit: function( { className, attributes, setAttributes } ) {
    return (
      <div className={ className }>
        <label className="field">
          <span className="field__label">Name</span>
          <PlainText
            className="field__input"
            id="email"
            value={ attributes.name }
            onChange={ ( name ) => setAttributes( { name } ) }
          />
        </label>
        <label className="field">
          <span className="field__label">Email</span>
          <PlainText
            className="field__input"
            id="email"
            value={ attributes.email }
            onChange={ ( email ) => setAttributes( { email } ) }
          />
        </label>
      </div>
    );
  }
  ...
}

我希望此代码的重复性更低,并且避免复制粘贴。这就是我的目标:

{
  edit: function( { className, attributes, setAttributes } ) {
    var fields = {
      name:    'Name',
      email:   'Email',
      phone:   'Phone',
      website: 'Website',
    }
    var html = [];
    for ( var field_key in fields ) {
      var label = fields[ field_key ];
      html.push( (
        <label className="field" key={field_key}>
          <span className="field__label">{ label }</span>
          <PlainText
            className="field__input"
            id={field_key}
            value={ attributes[field_key] }
            onChange={ ( ??? ) => setAttributes( { ??? } ) }
          />
        </label>
      ) );
    }
    return (
      <div className={ className }>
        {html}
      </div>
    );
  },
}

我怎么通过 field_key 变量转换为 setAttributes 功能?

2 回复 | 直到 8 年前

FK82 8 年前

你其实不需要 handler 要绑定的函数 field_key . 如果你只是把一个箭头函数传递给 onChange 它将绑定 字段\键 然后你可以把它传给 setAttributes :

for (const field_key in fields) {
  const label = fields[field_key];

  html.push(
    <label className="field" key={field_key}>
      <span className="field__label">{ label }</span>
      <PlainText
        className="field__input"
        id={field_key}
        value={ attributes[field_key] }
        onChange={() => { setAttributes({ [field_key]: fields[field_key] }); }}
       />
    </label>
  ); 
}

我举了个例子 Codepen 为了说明这一点(反应示例,但在您的案例中也应该有效)。

forsvunnet 8 年前

我找到了解决办法。到…的时候 onChange 被触发 for loop 已完成和 field_key 引用最后一个键“网站”。为了解决这个问题,我为处理程序函数创建了一个闭包,它将引用锁定到 字段\键 在当前迭代中。

const handler = (setter, key) => value => setter( { [key]: value } );
{
  ...
  edit: function( { className, attributes, setAttributes } ) {
    let fields = {
      name:    'Name',
      email:   'Email',
      phone:   'Phone',
      website: 'Website',
    }
    let html = [];
    for ( let field_key in fields ) {
      let label = fields[ field_key ];
      html.push( (
        <label className="field" key={field_key}>
          <span className="field__label">{ label }</span>
          <PlainText
            className="field__input"
            id={field_key}
            value={ attributes[field_key] }
            onChange={handler( setAttributes, field_key )}
          />
        </label>
      ) );
    }
    return (
      <div className={ className }>
        {html}
      </div>
    );
  },
  ...
}