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 onChange中访问event以及editItem对象？谢谢

Answer 1

因为你没有传递event object，所以写一下：

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

Answer 2

onChange={() => this.editItem()}无效，因为您忘记将其与组件绑定：

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

在输入中传递事件和参数onChange;应对

2 个答案: