傳遞事件和參數onChange in input;反應

Question

我有一個組件，如下：

import React from 'react'; 

import MyComponent from '../utils/MyComponent'; 


export default class BasicList extends MyComponent { 

    constructor(props) { 
     let custom_methods = [ 
      'renderItemOrEditField', 'toggleEditing', 'moveCaretAtEnd', 
      'editItem' 
     ]; 
     super(props, custom_methods); 
     this.state = { 
      editing: null, 
      current_text: '' 
     }; 
    } 

    // moveCaretAtEnd(e) { 
    //  var temp_value = e.target.value 
    //  e.target.value = '' 
    //  e.target.value = temp_value 
    // } 

    editItem(event) { 
     let current_value = event.target.value; 
     alert(current_value + this.state.editing); 
    } 

    renderItemOrEditField(item) { 
     console.log(item); 
     if (this.state.editing === item.id) { 
      return (
       <input 
        onKeyDown={ this.handleEditField } 
        type="text" 
        className="form-control" 
        ref={ `${item.type}_name_${ item.id }` } 
        name="title" 
        autofocus 
        onFocus={this.moveCaretAtEnd} 
        defaultValue={ item.name } 
        onChange={() => this.editItem(event)} 
       /> 
      ); 
     } else { 
      return (
       <li 
        onClick={this.toggleEditing.bind(null, item.id)} 
        key={item.id} 
        className="list-group-item"> 
        {item.name} 
       </li> 
      ); 
     } 
    } 

    toggleEditing(item_id) { 
     this.setState({editing: item_id}); 
    } 


    render() { 
     let li_elements = null; 
     let items = this.props.items; 

     if (items.length > 0) { 
      li_elements = items.map((item) => { 
       return (
        this.renderItemOrEditField(item) 
       // {/* }<li key={item.id}> 
       //  {item.name} - 
       //  <button onClick={() => {this.props.deleteCallback(this.props.item_type, item.id, item.name)} }> 
       //   Delete 
       //  </button> 
       // </li> */} 

      ); 
      }); 
     } 

     return (
      <div> 
      <h4>{this.props.title}:</h4> 
       <ul className="list-group"> 
        {li_elements} 
       </ul> 
      </div> 
     ); 
    } 
} 

我希望能夠作出API調用當用戶編輯一個項目的名稱。要做到這一點，我需要訪問新名稱，項目類型以及我們正在編輯的項目的ID。我在向React中的onChange處理程序獲取正確數據時遇到問題。在editItem,this即將進入未定義狀態。

試圖

onChange={() => this.editItem}

沒有錯誤，但什麼都不做。

試圖

onChange={() => this.editItem()}

產生Uncaught TypeError: Cannot read property 'target' of undefined

我如何可以訪問this.state，也是event對象在此editItem的onChange？謝謝

Answer 1

因爲你沒有通過event object，寫這樣的：

onChange={(event) => this.editItem(event)} 

Answer 2

onChange={() => this.editItem()}不工作，因爲你忘了你的組件綁定它：

constructor(props){ 
    ... 
    this.editItem = this.editItem.bind(this); 
    ... 
}