Как вытащить значение из state?

281

15 июля 2021, 13:50

Новичек в React, застопорился на данном моменте. Нужно при клике на объект, вытащить соответствующие значение из state. На JS реализовывал с помощью дата-атрибут и обращался к массиву классов "fruits".

 class Fruit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            fruits: {Apple: 45, Orange: 40, Apricot: 50},
        };
    }
    render() {
        return (
            <div className="fruitsList">
                <div className='fruits' id='apple'><p>Яблоко 45cal</p></div>
                <div className='fruits' id='orange'><p>Апельсин 40cal</p></div>
                <div className='fruits' id='apricot'><p>Абрикос 50cal</p></div>
            </div>
        )
    }
}

Answer 1

Как-то так (добавил обработчик onClick на клик по div тэгу, а также поменял значение первой буквы у аттрибута id на верхний регистр, чтобы было соответствие именам в state):

class Fruit extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
 
      fruits: { 
        Apple: 45, 
        Orange: 40, 
        Apricot: 50 
      }, 
    }; 
     
    this.handleClick = this.handleClick.bind(this); 
  } 
 
  handleClick(e) { 
    const { id } = e.currentTarget; 
    const value = this.state.fruits[id]; 
    console.log('Name of fruit:', id); 
    console.log('Value from state:', value); 
  } 
 
  render() { 
    return ( 
    <div className="fruitsList"> 
      <div className='fruits' id='Apple' onClick={this.handleClick}> 
        <p> Яблоко 45 cal </p> 
      </div> 
      <div className='fruits' id='Orange' onClick={this.handleClick}> 
        <p> Апельсин 40 cal </p> 
      </div> 
      <div className='fruits' id='Apricot' onClick={this.handleClick}> 
        <p> Абрикос 50 cal </p> 
      </div> 
    </div> 
  )} 
} 
 
ReactDOM.render( 
  <Fruit />, 
  document.getElementById('container') 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 
<div id="container"> 
  <!-- This element's contents will be replaced with your component. --> 
</div>

Первое - у Вас fruits - это не массив, а объект.

Второе - нужно учитывать регистр значения, указанного в id когда обращаемся к проперти в объекте fruits. Для примера this.state.fruits['Apple'] - сработает, а this.state.fruits['apple'] - вернет undefined.

Третье - функция handleClick имеет привязку через bind в конструкторе, делается это, чтобы можно было работать со state. Эта привязка обязательна для работы this в функции (потому что методы класса в JavaScript по умолчанию не привязаны к контексту). Почитать про обработку событий тут: Обработка событий

Answer 2

handleClick(arg){
  let {fruits} = this.state;
  for(let key in fruits){
    If(key == arg){
     alert(fruits[key]);
   }
  }
}

<div onclick=“()=>handleClick(‘Apple’)”></div>
<div onclick=“()=>handleClick(‘Orange’)”></div>
<div onclick=“()=>handleClick(‘Apricot’)”></div>