reactjs Wordpress gutenberg 设置属性，属性作为参数传递

rdrgkggo 于 12个月前发布在 React

关注(0)|答案(3)|浏览(129)

我正在创建一个具有许多属性的 gutenberg 块，并尝试为可以通过输入字段更改的属性创建一个通用函数。对于属性title，我有：

<RichText
  onChange={this.props.onTitleChange}
  value={this.props.title}
/>

字符串
和

function onTitleChange(value) {
  setAttributes({title: value});
}

型
这是可行的。现在我想创建一个通用函数，在setAttributes()中，title可以是我从React onChange传递的任何东西。我尝试了另一个函数onValueChange：

<RichText
  onChange={this.props.onValueChange.bind("title")}
  value={this.props.title}
/>

型
和

function onValueChange(value) {
  setAttributes({this: value});
}

型
这不起作用，因为“this”不是我的块的属性。即使我的函数onValueChange中的this确实等于“title”，它是与bind()函数一起传递的。我不确定我试图做的是否可行，因为我不完全理解setAttributes()函数，但如果可以做到，它将保存大量时间和额外代码，因为否则我必须为所有的属性创建一个onXChange()函数。所以我的问题是：我如何用setAttributes()为动态属性设置一个值？

reactjs

来源：https://stackoverflow.com/questions/57737115/wordpress-gutenberg-setattributes-with-attribute-passed-as-argument

3条答案

按热度按时间

gywdnpxw1#

原来我所要做的就是把this放在括号里，所以：

function onValueChange(value) {
  setAttributes({[this]: value});
}

字符串
保持绑定属性：

onChange={onValueChange.bind('title')}

型
另一种选择是像这样内联地使用setAttributes：

onChange={ title => setAttributes( { title } ) }

型
确保将title更改为属性的名称。

赞(0）回复(0）举报 12个月前

v1uwarro2#

目前我能想到的是：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
  }

  render() {
    // tell React that we want to associate the ref
    // with the `textInput` that we created in the constructor
    <RichText
      onChange={ ()=> this.props.onValueChange("title",value) }
      value={this.props.title}
      ref={this.textInput}
    />
  }
}

  function onValueChange(property ,value) {
    let element = ReactDOM.findDOMNode(this.refs.textInput);
    element.setAttributes({property: value});
  }

字符串
第一个月

赞(0）回复(0）举报 12个月前

e5nszbig3#

在这里找到答案真是太棒了。我试图把这个问题更进一步，这让我更简单！
现在我有了一个组件，可以反复使用它来实现我想要的所有属性。

export const CustomComponents = {
    CustomRangeControl: (val, attribute, setAttributes) => {        
        return (
            <RangeControl
                label={[attribute]}
                value={val}
                onChange={(value) => setAttributes({[attribute]: value}) }
                min={20}
                max={800}
            />
        );
    }
}

字符串
现在我可以像这样把它加到我的积木上

<InspectorControls>
    <PanelBody ...>
        {CustomComponents.CustomRangeControl(width, "width", setAttributes)}
        {CustomComponents.CustomRangeControl(height, "height", setAttributes)}
        ...
    </PanelBody>
</InspectorControls>

型

赞(0）回复(0）举报 12个月前

我来回答

reactjs Wordpress gutenberg 设置属性，属性作为参数传递

3条答案

相关问题

热门标签

最新问答