e.target可訪問，但e.target.value不在React組件

我遇到了一個奇怪的問題，我的React應用程序無法讓我的deleteTime()函數正常工作。我試圖通過使用e.target.value從this.state.times中刪除一個元素，這將是我想要刪除的<li>的{key}。 value屬性被正確添加到元素中，但我無法訪問它。我知道這個問題與MaterializeCSS有關，因爲如果我將元素從<i>更改爲<button>而沒有圖標，代碼就可以工作。e.target可訪問，但e.target.value不在React組件

主要有兩個部分組成，主要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顯然具有價值屬性e.target.value不確定。

這裏是爲RecentTimes組件：您需要使用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 value={timeIndex} onClick={this.props.deleteTime} className={icons}>close</i> 
     </li> 
    ); 
    }); 

    return (
     <ul>{times}</ul> 
    ); 
    } 
}

來源

2015-11-04 saadq

爲什麼'i'具有值屬性？ – epascarello

對不起，從我的描述可能不清楚。 ''標籤基本上被用來製作一個看起來像'X'的圖標。點擊它會進入'deleteTime（）'函數。通過給它一個值，我可以在'this.state.times'數組中刪除正確的值。 – saadq

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> ); } }

e.target可訪問，但e.target.value不在React組件

回答

相關問題