从 React 中的 div 获取 prop 值

Question

我的问题的一个工作示例可以在以下位置找到：

https://codepen.io/RyanCRickert/pen/vYYQeaW

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

例如，如果我输入名称“Bob”，然后单击带有侦听器的 div，我可以控制台记录 event.target。使用上面的示例，我得到 "<div class='person-item__X' value='0'>X</div>" for event.target 和 undefined for event.target.value。该值被分配为<div onClick={props.removeName} class="person-item__X" value={props.value}>X</div>。

在这样的庄园里，我只是无法抓住一个 div 的价值吗？或者有什么我想念的吗？谢谢

Answer 1

将这些更改为您的代码

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

在 PeopleList 中替换这一行

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

在 TeamGenerator 中替换这一行

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

现在在 handleRemoveName 中，您将收到点击 X 的项目的 id

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

Answer 2

在您的情况下，要获取此 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>
    );
  }
}

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

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;

div 节点没有input 这样的值，所以你不能用你的老方法去抓取它。