我正在为WordPress编写一个古腾堡区块插件,但我很难理解新的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
函数中?
onChange={(name) => setAttributes({[name]: attributes[name]})}
。 - dfsqfield_key
而不是name
,那也不起作用。 - forsvunnetonChange={(name) => setAttributes({[name]: fields[name]})}
。 - dfsqonChange={( v ) => setAttributes({ [field_key]: v })}
让它工作了,但现在我遇到的问题是它只更新最后一个字段。 - forsvunnet