Реагировать - Как установить состояние для детей при нажатии на родителя - PullRequest
Новая
       13

Реагировать - Как установить состояние для детей при нажатии на родителя

0 голосов
/ 04 октября 2018

У меня есть строка поиска для дочернего компонента, который отображает панель, когда я пишу внутри, и я пытаюсь закрыть ее на своем родителе, когда нажимаю за пределами этой панели.Поэтому мне нужно решение, чтобы установить состояние на ложь в данный момент.

Есть идеи?

Вот пример моего кода:

[parent.js] 

constructor(props) {
  super(props)
  this.state = {
    showResults: false
  }
}

render() {
  return (
    <div onClick={() => this.setState({showResults: false})}>
      <div>
        <Children showResults={this.state.showResults}/>
    </div>
  </div>)
}

[children.js] 

constructor(props) {
  super(props)
  this.state = {
    showResults: this.props.showResults
  }
}

getResults(event) {
  this.setState({input: event.target.value, showResults: true})
}

render() {
  return (<div>
    <Input onChange={this.getResults.bind(this)}/>
    this.state.showResults ?
      <div>PANNEL</div>
      : ''
  </div>)
}

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Я, наконец, сделал это с помощью Redux, я создал редуктор ShowPannel, который просто имеет логическое состояние видимости внутри.Вот мой код:

[Мой взгляд]: 

render() {
  return (<div onClick={() => this.props.showPannel(false)}>
    {
      this.props.visible
        ? <div className="listResults"></div>
        : ''
    }
  </div>)
}

function mapStateToProps(state) {
  return {visible: state.showPannelReducer.visible};
}

function mapDispatchToProps(dispatch) {
  return {
    showPannel: (visible) => dispatch(showPannel(visible))
  }
}

Home = connect(mapStateToProps, mapDispatchToProps)(Home);

export default Home;

[Мой редуктор]: 

import {SHOW_PANNEL} from '../actions/pannel/types';

const initialState = {
  visible: false
};

function showPannelReducer(state = initialState, action) {
  switch (action.type) {
    case SHOW_PANNEL:
      return {
        ...state,
        visible: action.visible
      }
    default:
      return state
  }
};

export default showPannelReducer;
0 голосов
/ 04 октября 2018

Когда панель открыта, создайте прозрачный div, который покрывает экран позади панели со свойством onClick для изменения состояния.

...