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

Question

我的React应用程序出现了一个奇怪的问题，我无法使deleteTime()函数正常工作。我打算尝试使用this.state.times删除e.target.value中的元素，{key}是我要移除的<li> <i>。 value属性正在被正确添加到元素中，但我无法访问它。我知道问题与MaterialiseCSS有关，因为如果我将元素从<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> ); } } 未定义。

这是RecentTimes的组件：

npm pack

Answer 1

使用数据属性

http://MyIp:80/process/file

和

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

或浏览器是否支持dataset

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

Answer 2

您需要使用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>
    );
  }
}