Question

我需要通过点击父项value从标签p中获得div。

我该怎么做？

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;

Answer 1

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

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：[...]}）更新组件

Answer 2

您可以将ref传递给p标签，然后onClick从该ref中获取p标签内的值。

rs0:PRIMARY> rs.add('mongodb.secondary1:27017')
{
    "operationTime" : Timestamp(1552552019, 1),
    "ok" : 0,
    "errmsg" : "Either all host names in a replica set configuration must be localhost references, or none must be; found 1 out of 2",
    "code" : 103,
    "codeName" : "NewReplicaSetConfigurationIncompatible",
    "$clusterTime" : {
        "clusterTime" : Timestamp(1552552019, 1),
        "signature" : {
            "hash" : BinData(0,"AAAAAAAAAAAAAAAAAAAAAAAAAAA="),
            "keyId" : NumberLong(0)
        }
    }
}

对于多种情况，请创建单独的组件并为p标签传递值，然后通过props单击处理程序：-

<p ref={(el) => this.el = el}>Мода и стиль</p>

 onIndustry(e) {
    console.log(e)
    const value = this.el && this.el.innerText;
  }

然后父组件中的onIndustry更改为接收值参数：-

function Profile({ value, handleClick }) {
  return (
    <div className="Profile__otrasl_block"
      onClick={() => handleClick(value)}>
      <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>{value}</p>
    </div>
  )
}

Answer 3

理想情况下，如果您想从<p>标记中获取标签，并且该标签代表组件的状态，则应为其添加一个统计信息并使用状态中的值

class Industry extends Component {

    state = {
    industry: ["Финансы", "Развлечения"],
    pState : "Мода и стиль"
    }

    onIndustry(e) {
    console.log(e)
    console.log(this.state.pState)
    }

    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>
            // NEED GET VALUE FROM HERE
            <p>{this.state.pState}</p>
            </div>

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

export default Industry;

如何从子标签中点击以获取“值”？

3 个答案: