Question

我想为在线商店构建过滤器。当我更改任何表单控件的值（过滤器）时，它应该调用父组件FilterGroup的方法。问题是我无法访问子项onChange属性中的父项。

我的代码：

var FilterGroup = React.createClass({
    render: function() {
        return (
            <div className="filter-group">
                <FilterGroup.Header title={this.props.name} />
                <FilterGroup.Content>
                    {this.props.children}
                </FilterGroup.Content>
            </div>
        );
    }
});

// Header of the filter group
FilterGroup.Header = React.createClass({
    render: function() {
        return (
            <div className="filter-group-header">
                <span className="filter-group-title">
                    {this.props.title}
                </span>
            </div>
        );
    }
});

// Content of the filter group
FilterGroup.Content = React.createClass({
    render: function() {
        return (
          <div className="filter-group-content">{this.props.children}</div>
        );
    }
});

// Array that contain all the filter groups
var filters = [];

// Example of filter group
filters.push(
    <FilterGroup key="type" name="Shirt params">
        <select key="size" className="form-control">
            <option value="s">Small</option>
            <option value="m">Medium</option>
            <option value="l">Large</option>
        </select>
        <select key="color" className="form-control">
            <option value="green">Green</option>
            <option value="red">Red</option>
            <option value="black">Black</option>
        </select>
    </FilterGroup>
);

ReactDOM.render(
    <div>{filters}</div>,
    document.getElementById('filters')
);

我已经读过Flux，但并不多，因为我不完全确定它是我需要的。如果我错了，请纠正我或提出另一种解决方案。

Answer 1

您可以简单地将父元素的回调函数作为Props提供给子元素，子元素可以在过滤器更改时调用它。

所以只需将FilterGroup函数作为子项的道具。

访问在react.js中传递给组件外部的子对象内的父对象

1 个答案: