Question

My React渲染功能最终呈现一组元素：

data.map((element) => {
  return <Object onChange={this.onObjectChange} />;
});

我的问题是，当我收到回调时，找出哪个对象调用了onChange方法的适当方法是什么？

Answer 1

onSubjectChange函数的第一个参数将包含您的事件，其中包含事件信息。

希望有所帮助！

Answer 2

如果可以，请将ID或元素传递给您正在创建的组件，然后将该引用传递回事件处理程序。

handleObjectChange = id => {
  const object = data.find(id)
}

render() {
  return data.map((element, index) => (
    <Object onChange={this.handleObjectChange} key={element.id} id={element.id} />
  ))
  // or just pass element={element} to track the object itself, why not?
  // after all, every array item's key must be unique
}

在对象中......

function change() {
  const { onChange, id } = this.props
  onChange(id)
}

您的对象是关闭的，还是不想添加额外的属性？你可以尝试包装它。

class IdentifiedButton extends Component {
  handleClick = (event, ...args) => {
    const { id, onClick } = this.props
    onClick(event, id, ...args)
  }

  render() {
    const { id, onClick, ...props } = this.props
    return <Button onClick={this.handleClick} {...props} />
  }
}

Answer 3

在函数中包装回调并传递标识符：

data.map(element => <Object onChange={event => this.onObjectChange(element.id, event)} />);

Answer 4

如果重新渲染你的Object组件不会花费你那么多，我会选择这样的东西

data.map(element => <Object onChange={() => this.onObjectChange(element)} />);

如果Object组件非常重，您最好将element传递给Object组件，然后将其传递给onChange回调

data.map(element => (
  <Object
    key={element.id} 
    onChange={this.onObjectChange} 
    element={element}
  />
);

class Object extends React.Component {
  handleChange = () => this.props.onChange(this.props.element)

  render(){
    return (
      <input type='text' onChange={this.handleChange} />
    )
  }
}

Answer 5

为避免在每个渲染器中创建匿名函数，您可以使用一个函数来创建此类处理程序（我以Todo App为例）：

createOnChangeEventHandler(todo) {
    const { onToggleClick } = this.props;

    this.handlers = this.handlers || {};
    if (!this.handlers[todo.id]) {
      this.handlers[todo.id] = () => onToggleClick(todo.id);
    }

    return this.handlers[todo.id];
  }

... 然后在render()

{todos.map(todo => (<Todo key={todo.id} onClick={this.createOnChangeEventHandler(todo)} />))}

在元素数组上反应事件侦听器

5 个答案: