Question

我是新来的人，我要做出反应并重新执行（并发布到堆栈溢出中！）。

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

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

我完全按照redux教程进行操作，以使其onClick方法通过容器调度setVisibilityFilter(buttonprops.filter)。 See: FilterLink.js可以正常工作，并使用相应的选项更新状态的visibleFilter。

但是，我对如何访问州的过滤器以隐藏/显示不同的表单感到困惑。我想要类似于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的精力。我认为我应该将值作为道具传递给子窗体，但我对此感到困惑，尤其是因为我不知道如何在不更改onClick的情况下获得该值，并且onClick已经在FilterLink.js中定义

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

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传递给组件。

因此，根据您发布的链接，此方法应该有效：

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)

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

2 个答案: