Передача состояния в одноуровневый компонент без использования Redux - PullRequest
Новая
       9

Передача состояния в одноуровневый компонент без использования Redux

0 голосов
/ 19 сентября 2018

Итак, у меня есть компонент с именем "itemSelection", который содержит состояние со свойством "allItems" типа array 

constructor(props){
    super(props);
    this.state = {
      allItems: []
    }
  }

Затем у меня есть компонент с именем "method", который содержит функцию, которая возвращаетзначение 

selectMethod = (e) => {
      const x = e.target.getAttribute("data");  
      this.setState({method: x}, () => console.log(this.state.method));  
  }

Итак, я хочу перенести значение свойства «метод» и перенести его в массив «allItems» вместе с его текущим состоянием.

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Решение состоит в том, чтобы поднять состояние вверх : общее состояние (здесь элементы) должно поддерживаться ближайшим предком обоих компонентов.Затем этот предок передает состояние детям через подпорки вместе с функцией обратного вызова, которую дети могут использовать для изменения состояния.

Например, в псевдокоде: 

class Parent extends React.Component {

   constructor(props) {
      super(props)
      this.state = {
         allItems: []
      }
      this.onSelect = this.onSelect.bind(this)
   }

   onSelect(item) {
      this.setState({allItems: this.state.allItems.push(item)})
   }

   render() {
      return (
         <Child1 items={this.state.allItems}/>
         <Child2 onSelect={this.onSelect}/>
      )
   }
}

class Child1 extends React.Component {
   render() {
      return (
         {this.props.items.map(i => i.name)}
      )
   }
}

class Child2 extends React.Component {
   render() {
      return (
         <button onClick={this.props.onSelect(...)}>button</button>
      )
   }
}
0 голосов
/ 19 сентября 2018

В компоненте itemSelection создайте функцию, которая будет обновлять все элементы.Затем передайте эту функцию в свойстве компоненту метода и вызовите его оттуда.

...