我正在为 WordPress 编写一个 gutenberg block 插件,但我无法理解新的 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
函数?
最佳答案
您实际上不需要handler
函数来绑定(bind)field_key
。如果您只是将箭头函数传递给 onChange
,它将绑定(bind) field_key
,然后您可以将其传递给 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 上举了一个例子来说明这一点(React 示例,但也适用于您的情况)。
关于javascript - 如何将 key 传递给 ESNext 中的函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51610527/