javascript - onClick onClick on "a"如果它在 react 中有一些子元素，则标签无法正常工作

Question

下面是我创建的动态表单。它工作正常。但是在“a”标签内，如果我将一些子元素添加到“a”标签，“a”标签上的 onClick 事件将无法正确执行并传递专有名称。

  import React, { Component } from "react";
import "./stylesheet/style.css";

export default class Main extends Component {
  state = {

    skills: [""]
  };



  dynamicInputHandler = (e, index) => {
    var targetName = e.target.name;
    console.log(targetName);

    var values = [...this.state[targetName]];
    values[index] = e.target.value;
    this.setState({
      [targetName]: values
    });
  };

  addHandler = (e, index) => {
    e.preventDefault();
    let targetName = e.target.name;
    let values = [...this.state[targetName]];
    values.push("");
    this.setState({
      [targetName]: values
    });
  };

  removeHandler = (e, index) => {
    e.preventDefault();
    let targetName = e.target.name;
    console.log(e.target.name);

    let values = [...this.state[targetName]];

    values.splice(index, 1);
    this.setState({
      [targetName]: values
    });
  };

  render() {
    return (
      <div>
        <form className="form">

          {this.state.skills.map((value, index) => {
            return (
              <div className="input-row row">
                <div className="dynamic-input">
                  <input
                    type="text"
                    placeholder="Enter skill"
                    name="skills"
                    onChange={e => {
                      this.dynamicInputHandler(e, index);
                    }}
                    value={this.state.skills[index]}
                  />
                </div>
                <div>
                  <span>
                    <a
                      name="skills"
                      className="close"
                      onClick={e => {
                        this.removeHandler(e, index);
                      }}
                    >
                      Remove
                    </a>
                  </span>
                </div>
              </div>
            );
          })}
          <button
            name="skills"
            onClick={e => {
              this.addHandler(e);
            }}
          >
            Add
          </button>
        </form>
        {this.state.skills[0]}
      </div>
    );
  }
}

我想在“a”标签内添加图标，添加图标标签后，表单中断并给出错误“类型错误:传播不可迭代实例的无效尝试”

这行得通 -

          <span>
                <a
                  name="skills"
                  className="close"
                  onClick={e => {
                    this.removeHandler(e, index);
                  }}
                >
                  Remove
                </a>
              </span>

这不是(在标签内添加图标后)

       <span>
                <a
                  name="skills"
                  className="close"
                  onClick={e => {
                    this.removeHandler(e, index);
                  }}
                >
                  <i>Remove</i>
                </a>
              </span>

Answer 1

在 removeHandler 内部 让 targetName = e.target.parentElement.name;。当您将 Remove 包装在另一个标签中时，事件目标现在是 i 标签，name 未定义。