Question

有没有办法从哑子组件更新父状态？我有网格布局，有儿童（标题和正文），我想使用标题作为输入过滤器。我将我的网格连接到带有父组件的数据库，将我的所有数据传递给正文和标题，但我希望从标题到连接的智能组件获取过滤器。我发现的唯一方法是连接GridHeader来存储数据并直接传递给它。

我的solutoin的问题是我想在不同的页面中使用不同数据类型的网格，所以我需要所有的网格组件都是愚蠢的。使用我的解决方案，我必须为每个数据/表类型编写特定的GridHeader，并将每个标头连接到不同的商店密钥。一个将连接到catalog: store.catalog秒将users: store.users等... 我的解决方案不是DRY，我不喜欢它：/请帮忙

这是我的GridHeader：

import React from 'react';

import { connect } from 'react-redux';
import { filterCatalog, setFilters } from '../../redux/actions/catalogActions';

@connect((store) => {
    return {
        catalog: store.catalog
    };
})
export default class GridHeader extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        const name = e.target.name;
        let filters = {
            [name]: e.target.value
        }
        this.props.dispatch(setFilters(filters))
    }

    handleSubmit(e) {
        if (e.which == 13){
            e.target.blur();
            //console.log('submit', this.props.catalog.filters)
            this.props.dispatch(filterCatalog(this.props.catalog.filters))
        }
    }

    render() {
        const headerItem = this.props.headers.map((x) => {
            return (
                <th class={x.class} key={x.name}>
                <div class="input-field">
                    <input type={x.type} id={x.id} name={x.name} placeholder={x.placeholder} class={x.class} disabled={x.disabled} onChange={this.handleChange} onKeyPress={this.handleSubmit}/>
                    <label for={x.name}>{x.label}</label>
                </div>
                <a class="filter-button hidden">
                    <i class="material-icons">backspace</i>
                </a>
            </th>
            )
        });

        return (
            <thead>
                <tr>
                    {headerItem}
                </tr>
            </thead>
        );
    }
}

Answer 1

您可以创建将为GridHeader提供数据的包装器组件。例如：

首次使用

@connect((store) => {
  return {
      catalog: store.catalog
  };
})
export default class FirstWrapperGridHeader extends React.Component {
  render() {
    <GridHeader {...props} />
  }
}

第二次使用：

@connect((store) => {
  return {
      catalog: store.anotherData
  };
})
export default class SecondWrapperGridHeader extends React.Component {
  render() {
    <GridHeader {...props} />
  }
}

你的GridHeader应该没有连接到redux商店，应该是愚蠢的。

从愚蠢的孩子反应Redux更新状态

1 个答案: