Как скрыть / отобразить отдельные формы, используя кнопки и избыточность? - PullRequest
Новая
       8

Как скрыть / отобразить отдельные формы, используя кнопки и избыточность?

0 голосов
/ 20 ноября 2018

Я новичок в реагировании и редукции (и публикации о переполнении стека!).

Я хотел бы скрыть / отобразить форму редукса, основанную на выборе кнопки.

У меня есть две кнопки: Option-A и Option-B.

Я точно следовал обучающему руководству, чтобы их методы onClick отправили setVisibilityFilter(buttonprops.filter) через контейнер. См .: 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> 
  )
}}

Я чувствую, что игра непосредственно с государством прямо сейчас потратила бы впустую усилия по внедрению редукса.Я думаю, что я должен передать значение в качестве опоры дочерним формам, но я запутался, как это сделать, особенно потому, что я не знаю, как бы получить это значение без изменения моего onClick в любом случае, и onClick ужеопределено в FilterLink.js

Должен быть какой-то способ доступа к моему фильтру видимости состояния, чтобы скрыть / отобразить форму, просто не зная, как туда добраться.Спасибо!

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

С помощью connect вы можете передавать что-либо из магазина Redux в ваш компонент через его реквизиты.

Таким образом, на основе размещенной вами ссылки это должно работать: 

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)
0 голосов
/ 20 ноября 2018

Убедитесь, что вы подключили компонент, который вы хотите условно визуализировать, к хранилищу примитивов. 

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 /> )}

   }

}
...