Javascript 从React中的div获取属性值

有关我的问题的工作示例，请访问：

我将对一个函数进行两级钻取，并将该函数与索引一起传递给渲染组件。提交名称时，它将呈现一个新组件，其中显示名称和具有onClick（X）的div。我试图接收名称在其所在数组中的位置索引，以便在单击按钮时将其拼接出来

例如，如果我输入名称“Bob”，然后单击带有侦听器的div，我可以控制台记录event.target。使用上述示例，我得到event.target的

“X”

，event.target.value的值未定义。该值被指定为

X

---

在这样一个庄园里，我难道就不能得到一个div的价值吗？还是我遗漏了什么？谢谢

在您的情况下，要获取此div中的值，您应该使用

ref

API

您的代码应该如下所示：

TeamGenerator.js

import React, { Component } from "react";
import CustomModal from "./Modal";
import PeopleList from "./PeopleList";
import "./index.css";

export default class App extends Component {
  constructor(props) {
    super(props);
    // Create a ref
    this.divTextRef = React.createRef();

    this.state = {
      names: [],
      selectedName: ""
    };
  }

  handleCloseModal = () => {
    this.setState({
      selectedName: ""
    });
  };

  handleChange = e => {
    this.setState({ name: e.target.value });
  };

  handleRemoveName = index => {
    // Get your name and index this way
    console.log("Your text: ", this.divTextRef.current.innerHTML);
    console.log("Your index: ", index);
  };

  handleSubmit = e => {
    e.preventDefault();
    const currentNames = this.state.names;
    if (this.state.name)
      currentNames.push(
        this.state.name[0].toUpperCase() + this.state.name.slice(1)
      );

    this.setState({
      name: "",
      names: currentNames
    });
  };

  render() {
    return (
      <div className="container">
        <CustomModal
          selectedName={this.state.selectedName}
          closeModal={this.handleCloseModal}
        />
        <form onSubmit={this.handleSubmit}>
          <label>
            Add name:
            <input
              type="text"
              value={this.state.name}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="Submit" />
        </form>
        <div className="people-list-container">
          <PeopleList
            people={this.state.names}
            removeName={this.handleRemoveName}
            upperRef={this.divTextRef} // Pass the ref down from your Component tree
          />
        </div>
      </div>
    );
  }
}

import React，{Component}来自“React”；
从“/Modal”导入CustomModal；
从“/PeopleList”导入PeopleList；
导入“/index.css”；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
//创建一个ref
this.divTextRef=React.createRef（）；
此.state={
姓名：[]，
selectedName:“
};
}
handleCloseModal=（）=>{
这是我的国家({
selectedName:“
});
};
handleChange=e=>{
this.setState（{name:e.target.value}）；
};
handleRemoveName=索引=>{
//以这种方式获取您的名称和索引
log（“您的文本：”，this.divTextRef.current.innerHTML）；
log（“您的索引：”，索引）；
};
handleSubmit=e=>{
e、 预防默认值（）；
const currentNames=this.state.names；
if（this.state.name）
currentNames.push(
this.state.name[0].toUpperCase（）+this.state.name.slice（1）
);
这是我的国家({
姓名：“，
名称：当前名称
});
};
render（）{
返回(
添加名称：
);
}
}

PeopleList.js

import React from "react";
import PersonListItem from "./PersonListItem";

export default class PeopleList extends React.Component {
  render() {
    return (
      <div className="people-container">
        <div className="people-title">List of people</div>
        <div className="people-list">
          {this.props.people.length === 0 ? (
            <div className="people-item">
              <span>No people added</span>
            </div>
          ) : (
            this.props.people.map((person, index) => (
              <PersonListItem
                key={index}
                name={person}
                value={index}
                removeName={() => this.props.removeName(index)} // Passing index to the removeName function of Parent
                upperRef={this.props.upperRef} // Continue passing it down to PersonListItem
              />
            ))
          )}
        </div>
      </div>
    );
  }
}

从“React”导入React；
从“/PersonListItem”导入PersonListItem；
导出默认类PeopleList扩展React.Component{
render（）{
返回(
人员名单
{this.props.people.length==0(
没有人补充
) : (
this.props.people.map（（person，index）=>(
this.props.removeName（index）}//将索引传递给父函数的removeName函数
upperRef={this.props.upperRef}//继续将其传递给PersonListItem
/>
))
)}
);
}
}

PersonListItem.js

import React from "react";

const PersonListItem = props => (
  <div className="person-item">
    <div ref={props.upperRef} className="person-item__name"> // Use the passed ref
      {props.name}
    </div>
    <div
      onClick={props.removeName}
      className="person-item__X"
      value={props.value}
    >
      X
    </div>
  </div>
);

export default PersonListItem;

从“React”导入React；
const PersonListItem=道具=>(
//使用传递的ref
{props.name}
X
);
导出默认PersonListItem；

---

div

节点没有像

input

那样的值，因此您无法用旧方法获取它。

将这些更改为您的代码

const PersonListItem = props => (
  <div class="person-item">
    <div class="person-item__name">{props.name}</div>
    <div onClick={() => props.removeName(props.value)} class="person-item__X" value={props.value}>X</div>
  </div>
);

---

谢谢你的回答，我会调查这一点，因为裁判不是我经常做的事情。

<PersonListItem key={index} name={person} value={index} removeName={(id) => props.removeName(id)} />

<PeopleList people={this.state.names} removeName={(id) => this.handleRemoveName(id)} />

handleRemoveName = id => {
    const currentArr = this.state.names;
    console.log(id);
  }