javascript - react onclick 数据值返回 null

Question

我正在尝试将我的状态对齐更改为:左对齐、居中对齐、右对齐或对齐，具体取决于哪个 <Icon />我点击了。但是，e.target.getAttribute('data-value')正在返回 null .

当我改变 <Icon icon="align-left" />通过 left ，它正在工作。 e.target.getAttribute('data-value')正在返回数据值。

那么，如何在单击 <Icon /> 时将状态更改为左居中、右居中或对齐？ ？

class TextStyleParams extends React.Component {
  constructor(props) {
    super(props);
    this.onClickAlignment = this.onClickAlignment.bind(this);

    this.state = {
      textStyle: {
        alignment: 'left',
        ...,
      },
    };
  }

  onClickAlignment(e) {
    const { textStyle } = this.state;
    const newTextStyle = {
      ...textStyle,
      alignment: e.target.getAttribute('data-value'),
    };
    this.setState({ textStyle: newTextStyle });
    this.props.updateTextStyle(newTextStyle);
  }
    
  render() {
    const { textStyle } = this.state;
        
    return (
      <div>
        <span role="button" onClick={this.onClickAlignment} data-value="left"><Icon icon="align-left" /></span>
        <span role="button" onClick={this.onClickAlignment} data-value="center"><Icon icon="align-center" /></span>
        <span role="button" onClick={this.onClickAlignment} data-value="right"><Icon icon="align-right" /></span>
        <span role="button" onClick={this.onClickAlignement} data-value="justify"><Icon icon="align-justify" /></span>
      </div>
    );
  }
}

class Icon extends React.Component {
  render() {
    const { icon } = this.props;
    return (
      <svg viewBox="0 0 24 24" styleName="icon" className={`icon-${icon}`}>
        <use xlinkHref={`iconset.svg#${icon}`} />
      </svg>
    );
  }
}

Answer 1

尝试使用 e.currentTarget.getAttribute('data-value')。 target 属性指的是事件发起的 dom 元素(将是 svg 元素)，而 currentTarget 指的是要发送的元素附加了处理程序。