如何 hide/display 使用按钮和 redux 分隔表单？

Question

我是 React 和 redux 的新手（并且在堆栈溢出时发帖！）。

我想要hide/display一个基于按钮选择的redux-form。

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

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

但是，我对如何访问州的过滤器以 hide/display 不同的形式感到困惑。我想要类似于 formValueSelector 所做的事情，但它不适用于按钮（因为它们没有 return 值？）

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

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 的努力。我认为我应该将值作为道具传递给子表单，但我很困惑如何这样做，特别是因为我不知道如何在不更改 onClick 的情况下获得该值，而 onClick 已经在 FilterLink.js

中定义

一定有某种方法可以将我的状态可见性过滤器访问到 hide/display 表单，只是不确定如何到达那里。谢谢！

Answer 1

确保您已将要有条件地呈现东西的组件连接到 redux 存储。

import { connect } from 'react-redux'

...

const mapStateToProps = state => ({visibleFilter: state.visibilityFilter})
export default connect(mapStateToProps)(MainForm)

然后您可以在连接组件的道具中访问此信息，例如

render() {

  return {

     {this.props.visibleFilter === VisibilityFilters.SHOW_A && (<FormA /> )}

     {this.props.visibleFilter === VisibilityFilters.SHOW_B && (<FormB /> )}

   }

}

Answer 2

使用 connect，您可以将 Redux Store 中的任何内容通过它的 props 传递给您的组件。

因此，根据您发布的 link，这应该可行：

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)

如何 hide/display 使用按钮和 redux 分隔表单？

How to hide/display separate forms using buttons and redux?

javascript

reactjs

redux

redux-form