@acorn

Как изменить состояние определенного объекта в списке React?

Привет!
как повесить toggle (close/open) при клике на кнопку, так чтобы открывался только нужный элемент списка для редактирования?
вот мой код :
Родительский компонент Customers.js
есть state при клике они меняются
class Customers extends Component{
    constructor() {
        super();
        this.state = {
            customers: sampleCustomers,
            openCL: false,
            className: 'opened'
        };
        this.openClose= this.openClose.bind(this);
        this.addCustomers = this.addCustomers.bind(this);
  
openClose(key){
        const customers = {...this.state.customers};
       
 this.setState({ openCL: !this.state.openCL});
        const className = this.state.openCL ? 'opened ': "closed";

        this.setState({
            customers: customers,
            className: className });

    }

    render(){
        const { customers }=this.state ;
        return(
            <div className="product-block ">
                <h3>List of customers</h3>
                <div className="product-table-block ">
                    <table>
                        <thead>
                        </thead>
                       <tbody>
                        {
                            Object
                            .keys(customers)
                            .map(key => <Customer key={key} details={ customers[key] } />)
                        }
                        </tbody>
                    </table>
                </div>

                <ListCustomers
                    addCustomers={this.addCustomers}
                    className={this.state.className}
                    openClose={this.openClose}
                    />
            </div>

Дочерний компонент ListCustomers.js
Передаю через props state родительского компонента.
При клике на кнопку открываются все таблицы для редактирования и ,собственно, закрываются все при повторном клике на кнопку.
А я хочу чтобы открывалась та таблица, на кнопку которой нажал {key}

class  ListCustomers extends Component{
  constructor(){
      super();
   }
    renderList(key){
      const customer = this.props.customers[key];
      const className = this.props.className;
        return(
            <div>
                <button onClick={()=>this.props.openClose(key)}>Edit id{customer.id}</button> 
                <div className={className} key={key}>
                      <input name="id"
                           value={customer.id}
                           placeholder="Id"
                           onChange={(e)=>{this.handlerChanges(e,key)}}
                           type="text" />
            ......код......              
         </div>
</div>
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 1
maxfarseer
@maxfarseer
реакт.рф, обучаю реакту и компании
В общем случае вам нужно либо содержать в стейте состояния каждого из этих объектов, либо сделать каждый элемент списка отдельным компонентом (компонент то будет один и тот же, просто рисоваться будет с разными данными, следовательно и state будет отдельный у каждого, а класс как я вижу вы уже умеете менять). Мне больше нравится второй вариант, так как при нем у вас в списке будет перерисовываться только маленький кусочек, а не весь список целиком.

Взаимодействовать с родителем можно через функции в props.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Quasar Software Москва
от 120 000 до 170 000 руб.
TOCTEAM Казань
от 70 000 до 150 000 руб.
Spotware Systems Лимассол
от 3 500 до 3 800 eur.
15 авг. 2018, в 23:38
300 руб./за проект
15 авг. 2018, в 22:39
60000 руб./за проект
15 авг. 2018, в 21:18
30000 руб./за проект