Reactjs 如何通过单击子标记获取“value”？

我需要通过单击父

div

从标签

p

中获取

value

我该怎么做

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;

import React，{Component}来自'React'；
类工业扩展组件{
状态={
行业：[“Фааазачачаа”]
}
电子工业（e）{
控制台日志（e）
}
render（）{
返回(
//点击这里
//从这里获得价值
Мааааааааааа

//点击这里
//从这里获得价值
Мцца

);
}
}
出口违约产业；

您可以将ref传递给p标记，然后单击从ref获取p标记内的值

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

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

this.el=el}>
电子工业（e）{
控制台日志（e）
const value=this.el&&this.el.innerText；
}

在多个情况下，创建一个单独的组件并传递p标记的值，然后通过道具单击处理程序：-

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>
  )
}

函数配置文件（{value，handleClick}）{
返回(
handleClick（值）}>
//从这里获得价值
{value}

)
}

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

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

render() {
    return (
      <div>
        <Profile value="Мода и стиль" handleClick={onIndustry} />
        <Profile value="some other value" handleClick={onIndustry} />
        <Profile value="some more different value" handleClick={onIndustry} />
      </div>
    );
  }
}

onIndustry（值）{
console.log（值）
}
render（）{
返回(
);
}
}

理想情况下，如果您想从

标记获取vale，并且它代表组件的状态，那么您应该为它添加一个stat，并使用它在state中的值

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;

类行业扩展组件{
状态={
行业：[“Фааазаччаа”]，
pState：“Маааааааааааа
}
电子工业（e）{
控制台日志（e）
console.log（this.state.pState）
}
render（）{
返回(
//点击这里
//需要从这里获得价值
{this.state.pState}

);
}
}
出口违约产业；
所以我认为如果有很多元素，应该像这样尝试

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;

import React，{Component}来自'React'；
类工业扩展组件{
状态={
行业：[“Фааазачачаа”]，
名单：[
{
值：“Маааааааааааа”，
图标：[“路径1”、“路径2”、“路径3”、“路径4”、“路径5”]
},
{
值：“Мцца”，
图标：['path2'、'path3'、'path4'、'path5'、'path6'，
“路径7”、“路径8”、“路径9']
},
]
};
onIndustry=（e）=>{
控制台日志（e）；
};
render（）{
返回(
{this.state.list.map（（数据）=>{
返回(
此.onIndustry（数据）}>
{data.icons.map（icon=>{
返回
})}
{data.value}

);
})}
);
}
}
出口违约产业；

然后，您可以使用this.setState（{list:[…]}）来更新组件
它工作正常，但是如果我有多个元素，我该怎么办？数据是来自服务器还是它的硬编码，并且您预先知道有多少元素？它的硬编码大约有20个元素。在jquery中，我可以使用子选择器并获取值，但在您的代码中，我需要为每个元素编写20次，我希望类似于jquery中的解决方案，以便从div获取子ref，您必须将ref添加到每个父div。您无法从单击处理程序获取父div的ref并访问子div。如果你在20个不同的时间使用相同的结构，你可能应该为它制作一个单独的组件，这将使事情变得非常简单。我也考虑过这个解决方案，但还有另一个问题，因为你可以看到标记跨度在任何地方都是不同的，然后我必须向每个元素发送html标记，您可以将
pState
转换为数组，或者按照@cEeNiKc的建议，再生成一个react组件，并将值传递为该代码应更改的属性，我不能用你的例子来做这件事，如果我能把html转换成一个变量，那么这就行了，我从你的问题中复制了这段代码。我不知道你想改变什么看看我的代码，里面有两个不同html的元素，这是可能的，但我可以像jquery$（“li.item ii”）那样做。找到（“li”）还是不可能？