javascript - 如何使用按钮和 redux 隐藏/显示单独的表单？

Question

我是 React 和 redux 的新手(并在堆栈溢出时发帖!)。

我想根据按钮选择隐藏/显示 redux 表单。

我有两个按钮:Option-A 和 Option-B。

我完全按照 redux 教程让他们的 onClick 方法通过容器分派(dispatch) setVisibilityFilter(buttonprops.filter)。 See: FilterLink.js这工作正常，并使用相应的选项更新状态的 visibilityFilter。

但是，我不知道应该如何访问状态过滤器来隐藏/显示不同的表单。我想要类似于 formValueSelector 所做的事情，但它不适用于按钮(因为它们不返回值？)

这是我的主要组件的代码:

class MainForm extends Component {
  render() {
    const { error } = this.props
    return ( 
      <Grid.Column width={9}>
        <Button.Group floated='right'>
        <FilterLink filter={VisibilityFilters.SHOW_A}>A</FilterLink>
        <Button.Or />
        <FilterForm filter={VisibilityFilters.SHOW_B}>B</FilterLink>
        </Button.Group>
        /* If SHOW_A, display FORM_A, else if SHOW_B, display FORM_B */
    </Grid.Column> 
  )
}}

我觉得现在直接玩弄状态会浪费实现 redux 的努力。我认为我应该将值作为 Prop 传递给子表单，但我很困惑如何这样做，特别是因为我不知道如何在不更改 onClick 的情况下获得该值，而 onClick 已经在 FilterLink.js 中定义

必须有某种方法来访问我的状态可见性过滤器以隐藏/显示表单，只是不确定如何到达那里。谢谢!

Answer 1

与 connect ，你可以通过它的 Prop 将任何东西从 Redux Store 传递到你的组件。

因此根据您发布的链接，这应该有效:

import { connect } from 'react-redux'

class MainForm extends Component {
  render() {
    const { error, visibilityFilter } = this.props
    return ( 
      <Grid.Column width={9}>
        <Button.Group floated='right'>
        <FilterLink filter={VisibilityFilters.SHOW_A}>A</FilterLink>
        <Button.Or />
        <FilterForm filter={VisibilityFilters.SHOW_B}>B</FilterLink>
        </Button.Group>
        {visibilityFilter === VisibilityFilters.SHOW_A
          ? <FormA />
          : <FormB />
        }
    </Grid.Column> 
  )
}}

const mapStateToProps = state => ({
  visibilityFilter: state.visibilityFilter
})

export default connect(mapStateToProps)(MainForm)