javascript - 在 React 的输入中传递事件和参数 onChange

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 以及此 editItem onChange 中的 event 对象？

Answer 1

因为你传递的不是事件对象，所以这样写:

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