入力時にイベントと引数onChangeを渡します。

Question

は、私は以下のようにコンポーネントを持つ反応：ユーザーがアイテムの名前を編集するとき、私はAPI呼び出しを行うことができるようにしたい

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

。これを行うには、新しい名前、そのアイテムのタイプ、編集中のアイテムのIDにアクセスする必要があります。 ReactのonChangeハンドラに正しいデータを取得できません。 editItemには、thisが不定に設定されています。しようと

onChange={() => this.editItem}

にはエラーがなく、何もしません。

しよう

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

はUncaught TypeError: Cannot read property 'target' of undefined

がどのように私はこのeditItemのonChangeでもthis.stateとeventオブジェクトへのアクセスを持つことができます得？ありがとう、あなたのコンポーネントにバインドするのを忘れたので

Answer 1

あなたがevent objectを渡していないので、このようにそれを書く：

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

Answer 2

onChange={() => this.editItem()}が動作していない：

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