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.onClickAlignement = this.onClickAlignement.bind(this);

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

  onClickAlignement(e) {
    const { textStyle } = this.state;
    const newTextStyle = {
      ...textStyle,
      alignement: 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.onClickAlignement} data-value="left"><Icon icon="align-left" /></span>
        <span role="button" onClick={this.onClickAlignement} data-value="center"><Icon icon="align-center" /></span>
        <span role="button" onClick={this.onClickAlignement} 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引用处理程序所附加的元素。

反应onclick数据值返回null

1 个答案: