Question

我是React Native和JavaScript的新手，所以我不知道以下方法是如何从React-Native项目中的组件接收“攻击”的：

handlerFsubmit = attrs => {
  const {
    timers
  } = this.state;
  this.setState({
    timers: timers.map(timer => {
      if (timer.id === attrs.id) {
        const {
          title,
          project
        } = attrs;
      }
      return {
        ...timer,
        title,
        project,
      };
      return timer;
    }),
  });
};

在渲染中有：

timers.map((timer) => (
              <EditableTimer
                key={timer.id}
                id={timer.id}
                title={timer.title}
                project={timer.project}
                elapsed={timer.elapsed}
                isRunning={timer.isRunning}
                onFormSubmit={this.handleFormSubmit}
                onRemovePress={this.handleRemovePress}
                onStartPress={this.toggleTimer}
                onStopPress={this.toggleTimer}>))

所以我想知道attrs如何获取其值以及attrs中包含什么？

Answer 1

您可以在attr方法中通过以下方式传递handlerFsubmit：

timers.map((timer) => (
  <EditableTimer
    key={timer.id}
    id={timer.id}
    title={timer.title}
    project={timer.project}
    elapsed={timer.elapsed}
    isRunning={timer.isRunning}
    onFormSubmit={() => this.handlerFsubmit(timer)} // pass the timer element here
    onRemovePress={this.handleRemovePress}
    onStartPress={this.toggleTimer}
    onStopPress={this.toggleTimer}
  >
))

Answer 2

您也可以通过绑定方法https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

  timers.map((timer) => (
      <EditableTimer
        key={timer.id}
        id={timer.id}
        title={timer.title}
        project={timer.project}
        elapsed={timer.elapsed}
        isRunning={timer.isRunning}
        onFormSubmit={this.handlerFsubmit.bind(null,timer)} 
        onRemovePress={this.handleRemovePress}
        onStartPress={this.toggleTimer}
        onStopPress={this.toggleTimer}
      >
    ))

Answer 3

我搜索并理解了这一点：

onformSubmit的值是一个函数；它是一个事件处理程序。处理程序作为参数接收的事件是一个包含目标字段。此目标是事件的DOM元素处理程序绑定到（即id，title或...）。通过访问此字段，我们可以确定目标值是什么。

您认为这个答案是正确的吗？如果不是，您能用更多细节纠正我吗？

如何将属性从组件的prop方法传递给处理程序？

3 个答案: