Как просачиваться в reactJS?

У меня есть компонент, которого заканчивает тем, что является одним <select> что показывает все категории, и оно нуждалось бы в том, чтобы заставить это функционировать давайте говорить, что с react, чтобы мочь просачиваться по категориям, мы дали их.

Это компонент select

import React from 'react';

class Category extends React.Component {

constructor() {
    super();
         this.state={items:[]};
  }
  componentDidMount() {

        fetch('http://localhost:3000/api/categories')
          .then(result => result.json())
          .then(items => {this.setState({items});
        });
}

  render() {
     return ( 
<div>
    <center>
        <select>
            <option default> ---- Select Category ---- </option>

            {this.state.items.length ?
            this.state.items.map(item=>

            <option>{item.name}</option>
            
                ) 
            : <li>Loading...</li>
          }
        </select>
    </center>
</div>
     );
  }
}

export default Category;

И этот тот контента, чтобы просачиваться

import React from 'react';
var imgdir = '../../../assets/images/';


class Content extends React.Component {

    constructor() {
    super();
         this.state={items:[]};
  }
  componentDidMount(){
    fetch(`http://localhost:3000/api/demos`)
        .then(result=>result.json())
    .then(items=>this.setState({items}))
  }
  render() {
    return(
        <ul>
          {this.state.items.length ?
            this.state.items.map(item=>

                <div id="1" className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div className="hovereffect">
        <img className="img-responsive" src={imgdir + item.img} alt={item.name} />
            <div className="overlay">
                <h2>{item.name}</h2>
                <p> 
                    <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
                </p> 
                <p> 
                    <a href="#">VIEW DEMO</a>
                </p> 
            </div>
    </div>
</div>

                ) 
            : <li>Loading...</li>
          }
      </ul>
   )
  }
}

export default Content;

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

PD: она пойдите категории возможно получать используя {item.id}

1
задан 17.01.2017, 20:51
0 ответов

Эта спрашивает, что снова возможно решать используя Context как я объяснил это тебе в твоем предыдущем вопросе.

Метод, чтобы просачиваться, может быть определенным в отце фильтров и таблицы. Этот метод может получать новую стоимость, выбранную в компоненте фильтрах и, он будет обновлен в состоянии отца. Когда становятся отвечающими современным требованиям состояние отца, так называемый ввод контекста category она будет отражена во всех детях, которые определят, что был доступен.

В следующем случае, он становится выданным из-за id категории.

class Filters extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      categories: []
    }
  }
  
  componentDidMount () {
    let categories = [
      {
        name: 'All categories',
        id: 0
      },
      {
        name: 'Computadoras',
        id: 1
      },
      {
        name: 'Televisores',
        id: 2
      },
      {
        name: 'Consolas',
        id: 3
      }
    ];
    this.setState({ categories });
  }
  
  render () {
    return (
      <select onChange={this.onChange.bind(this)}>
        {
          this.state.categories.map(c => 
            <option value={c.id}>{c.name}</option>
          )
        }
      </select>
    );
  }
  onChange (e) {
    this.context.applyFilters(parseInt(e.target.value));
  }
}

Filters.contextTypes = {
  applyFilters: React.PropTypes.func
};

class Products extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      products: []
    };
  }
  
  componentDidMount () {
    let products = [
      {
        name: 'TV Samsung Curve',
        price: 1099.90,
        category: 2
      },
      {
        name: 'Play Station 4',
        price: 1899.90,
        category: 3
      },
      {
        name: 'Dell XPS 13',
        price: 1999.90,
        category: 1
      },
      {
        name: 'XBox 360 S',
        price: 769.90,
        category: 3
      }
    ];
    let categories = [
      {
        name: 'Computadoras',
        id: 1
      },
      {
        name: 'Televisores',
        id: 2
      },
      {
        name: 'Consolas',
        id: 3
      }
    ];
    this.setState({ products, categories });
    this.backup = products;
    this.category = 0;
  }
  componentWillUpdate (props, state, ctx) {
    if (this.category !== ctx.category) {
      this.category = ctx.category;

      // 0 = se muestra todo
      if (this.category === 0) {
        this.setState({
          products: this.backup
        });
      }
      else {
        let products = this.backup.filter(p => (
          p.category === this.category
        ));
        this.setState({ products });
      }
    }
  }
  getCategoryName (id) {
    let cat = this.state.categories.filter(c => (
      c.id === id
    ));
    return cat[0].name;
  }
  render () {
    return (
      <table>
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Precio</th>
            <th>Categoría</th>
          </tr>
        </thead>
        <tbody>
          {
            this.state.products.map(p => (
              <tr>
                <td>{p.name}</td>
                <td>{p.price}</td>
                <td>{this.getCategoryName(p.category)}</td>
              </tr>
            ))
          }
        </tbody>
      </table>
    )
  }
}

Products.contextTypes = {
  category: React.PropTypes.number
};

class Parent extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      category: 0
    };
  }
  getChildContext () {
    let _this = this;
    return {
      category: this.state.category,
      applyFilters (category) {
        _this.setState({category });
      }
    };
  }
  render () {
    return (
      <div className="data">
        <Filters />
        <Products />
      </div>
    )
  }
}

Parent.childContextTypes = {
  category: React.PropTypes.number,
  applyFilters: React.PropTypes.fn
};

ReactDOM.render(
  <Parent />,
  document.getElementById('app')
);
body {
  padding: 1.5rem;
}
select {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: .5rem 1rem;
}
table {
  border-collapse: collapse;
  margin-top: 30px;
  width: 100%;
}
table thead {
  border-bottom: 2px solid #ccc;
}
table th, table td {
  padding: .5rem .75rem;
}
table tr:not(:last-of-type) {
  border-bottom: 1px solid #eee;
}
table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}
<div id="app"></div>

Код относительно простой. Когда elije категория в компоненте Filters он посылает себе отца, этот обновляет Ваше состояние и одновременно, контекст. Дети получат "извещение", которое обновило контекст и, в компоненте Products получает этот новую стоимость путь hook componentWillMount. У составляющего есть backup products, который будет использован, чтобы выдавать их и для, в случае были выбраны "все категории", распределяется backup в состояние.

В этом Пен ты можешь видеть пример функционируя.

1
ответ дан 03.12.2019, 17:38