时间戳

首页 > 解决方案 > 如何通过点击子标签获得“价值”？

reactjs - 如何通过点击子标签获得“价值”？

问题描述

我需要通过点击 parentvalue从标签中获取。pdiv

我怎样才能做到这一点？

import React, {Component} from 'react';

class Industry extends Component {

  state = {
    industry: ["Финансы", "Развлечения"]
  }

  onIndustry(e) {
    console.log(e)
  }

  render() {
    return (
      <div>
        <div className="Profile__otrasl">
          // CLICK HERE
          <div className="Profile__otrasl_block"
           onClick={this.onIndustry.bind(this)}
      >
            <span className="icon-icon-hat">
              <span className="path1"></span><span className="path2"></span><span className="path3"></span><span
              className="path4"></span><span className="path5"></span>
            </span>
        // GET VALUE FROM HERE
        <p>Мода и стиль</p>
      </div>
      // CLICK HERE
      <div className="Profile__otrasl_block"
           onClick={this.onIndustry.bind(this)}>
            <span className="icon-icon-med-bag">
            <span className="path1"></span><span className="path2"></span><span className="path3"></span><span
              className="path4"></span><span className="path5"></span><span className="path6"></span><span
              className="path7"></span><span className="path8"></span><span className="path9"></span>
            </span>
        // GET VALUE FROM HERE
        <p>Медицина</p>
      </div>

        </div>
      </div>
    );
  }
}

export default Industry;

标签： reactjs

解决方案

所以我认为如果你有很多元素，你应该这样尝试。

import React, { Component } from 'react';

class Industry extends Component {
  state = {
    industry: ['Финансы', 'Развлечения'],
    list: [
            {
              value: 'Мода и стиль', 
              icons: ['path1','path2', 'path3', 'path4', 'path5']
            },
            {
              value: 'Медицина', 
              icons: ['path2','path3', 'path4', 'path5', 'path6', 
                      'path7', 'path8', 'path9']
            },
          ]
  };


  onIndustry = (e) => {
    console.log(e);
  };

  render() {
    return (
      <div>
        <div className="Profile__otrasl">
          {this.state.list.map((data) => {
            return (
              <div className="Profile__otrasl_block" onClick={() => this.onIndustry(data)}>
                <span className="icon-icon-hat">
                  {data.icons.map(icon => {
                       return <span className={icon} />
                  })}
                </span>
                <p>{data.value}</p>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

export default Industry;

然后，您可以使用this.setState({list: [...]})更新组件

推荐阅读