处理反应事件“反应方式”：提供事件而将结果提供给回调 [英] Handling React events "the React way": supply the event vs. supply the result to a callback

问题描述

在React中处理（转储）子组件中的事件时，应从其（智能）父组件传递的回调中应提供什么以使其按预期方式？应该是事件还是只有我们感兴趣的结果部分？当我们有深度的嵌套组件时，它会如何扩展？还有其他一些考虑吗？

直观地说，我看到传递整个事件的好处，因为（i）我们可以在事件处理父母时获取更多的数据， （ii）它分离了关注（转储组件仅呈现并且没有逻辑）。另一方面，它需要孩子有一个构造函数，以 bind 包装方法。

看到了两种方法。例如，在 Thinking in React 作者在子组件中包装回调以传递值（请参阅CodePen ），而在大多数SO帖子中，事件被传递，其值通过 event.target.value 在父组件中提取。

代码示例

传递事件：

  class Parent extends React.Component {constructor（props）{super（props）; this.state = {checked：false}; this.handleClick = this.handleClick.bind（this）; } handleClick（event）{this.setState（{checked：event.target.checked}）; } render（）{return（< Child checked = {this.state.checked} handleClick = {this.handleClick} />）; }} class Child extends React.Component {render（）{return（< p>< input type =checkboxchecked = {this.props.checked} onChange = {this.props.handleClick} /> { }点击我< / p>）; }}  

> handleClick2 ）：

  class Parent extends React.Component {constructor（props）{super（props）; this.state = {checked：false}; this.handleClick = this.handleClick.bind（this）; } handleClick（checked）{this.setState（{checked：checked}）; } render（）{return（< Child checked = {this.state.checked} handleClick = {this.handleClick} />）; }} class Child extends React.Component {constructor（props）{super（props）; this.handleClick2 = this.handleClick2.bind（this）; } handleClick2（event）{this.props.handleClick（event.target.checked）; } render（）{return（< p>< input type =checkboxchecked = {this.props.checked} onChange = {this.handleClick2} /> {}单击我< / p> ; }}  

解决方案

应该通过你需要的事情没有事件。除非要从事件中提取相关数据，否则不需要整个对象：例如目标或对多个元素/操作使用相同的回调时。 / p>

你不会有任何性能问题，绝对不会有这样的做法。只要用你的判断。

When handling events in a (dump) child component in React, what should be supplied to the callback passed from its (smart) parent component to make it as intended? Should it be the event or only the portion of the result that we are interested in? How does it scale when we have deeply nested components? Are there some other considerations?

Intuitively, I see benefits behind passing the whole event because (i) we can get more data from the event when handling it in the parent and (ii) it separates concerns (the dump components only render and have no logic). On the other hand, it requires the child to have a constructor to bind the wrapper method.

I've seen both approaches used. For example, in Thinking in React the author wraps callbacks in the child component to pass values (see the code on CodePen), whereas in most of the SO posts the event is passed and its value is extracted in the parent component via event.target.value.

Code examples

Pass event:

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: false
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    this.setState({checked: event.target.checked});
  }

  render() {
    return (
      <Child checked={this.state.checked} handleClick={this.handleClick}/>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <p>
        <input
          type="checkbox"
          checked={this.props.checked}
          onChange={this.props.handleClick}
        />
        {" "}
        Click me
      </p>
    );
  }
}

Pass value only (notice handleClick2 ):

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: false
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(checked) {
    this.setState({checked: checked});
  }

  render() {
    return (
      <Child checked={this.state.checked} handleClick={this.handleClick}/>
    );
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick2 = this.handleClick2.bind(this);
  }

  handleClick2(event) {
    this.props.handleClick(event.target.checked);
  }

  render() {
    return (
      <p>
        <input
          type="checkbox"
          checked={this.props.checked}
          onChange={this.handleClick2}
        />
        {" "}
        Click me
      </p>
    );
  }
}

解决方案

You should pass the thing that you need without the event. There is no need for the whole object unless you want to extract relevant data from the event: for example the target or when you use the same callback for multiple elements/actions.

You won't have any performance problems and there is definitely no react-ish way to do this. Just use your judgement.

这篇关于处理反应事件“反应方式”：提供事件而将结果提供给回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！