e.target 是可访问的，但 e.target.value 不在 React 组件中

e.target is accessible, but e.target.value is not in React component

本文关键字：target 不在 React 组件 value 访问      更新时间：2023-09-26

我的 React 应用程序遇到了一个奇怪的问题，我无法让我的 deleteTime() 函数工作。我将尝试通过使用e.target.value从this.state.times中删除一个元素，这将是我要删除的<li>的{key}。value 属性被正确添加到元素中，但我只是无法访问它。我知道这个问题与 MaterializeCSS 有关，因为如果我将元素从<i>更改为没有图标内容的<button>，代码就可以工作了。

基本上有两个组件，主App将所有道具提供给RecentTimes组件，该组件仅显示格式化如下的时间列表：00 : 00 . 00

以下是App组件的外观(我删除了所有不相关的东西(：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      times: []
    };
  }
  deleteTime(e) {
    console.log(e.target); // <i value="1" class="material-icons right" data-reactid=".0.0.2.0.0.2:$1.1">close</i>
    console.log(e.target.value); // undefined
  }
  render() {
    return (
      <RecentTimes
        times={this.state.times}
        deleteTime={this.deleteTime}
      />
    );
  }
}

我不知道如果e.target.value显然具有值属性，为什么e.target未定义。

这是最近时代的组件：

class RecentTimes extends React.Component {
  render() {
    let icons = 'material-icons right';
    let times = this.props.times.map((time, timeIndex) => {
      return (
        <li key={timeIndex}>
          {time}
          <i value={timeIndex} onClick={this.props.deleteTime} className={icons}>close</i>
        </li>
      );
    });
    return (
      <ul>{times}</ul>
    );
  }
}

使用数据属性

<i data-value={timeIndex} onClick={this.props.deleteTime} className={icons}>close</i>

和

e.target.getAttribute('data-value');

或者浏览器是否支持数据集

e.target.dataset.value
你需要

使用 e.target.id。

class RecentTimes extends React.Component {
  render() {
    let icons = 'material-icons right';
    let times = this.props.times.map((time, timeIndex) => {
      return (
        <li key={timeIndex}>
          {time}
          <i id={timeIndex} onClick={this.props.deleteTime} className={icons}>close</i>
        </li>
      );
    });
    return (
      <ul>{times}</ul>
    );
  }
}

相关文章：