Javascript 如何处理类内组件从父事件处理程序传递给子事件处理程序的附加参数

我有一个父类组件，它应该处理子类的组件

onChange

事件。这是执行以下操作的类方法：

editTopic(index, value) {
    this.setState(prevState => {
      const class = {...prevState.class};
      class.topic =
        [...class.topic.slice(0, index), value, ...class.topic.slice(index +1)];
      const newClass = {...prevState.class, class};
      return {class: newClass};

    })
  }

我将此方法作为道具传递给第一个孩子，如下所示：

editTopic={(index, value) => this.editTopic(index, value)}

editTema(index) {
    return value => {
      this.setState(prevState => {
        const class = {...prevState.class};
        class.topic = [...class.topic.slice(0, index), value, ...class.topic.slice(index +1)];
        const newClass = {...prevState.class, class};
        return {class: newClass};

      })
    }
  }

editTopic ={(index) => this.editTopic(index)}

我将这个道具向下传递到一个子组件，在那里我可以获得

索引。在这里，我像这样使用这个函数回调来给它提供
索引
，并将它传递给
选择
组件，该组件将给它一个
值
：

<AutocompleteSelect handleChange={() => editTopic(index)}/>

但是，这不起作用，我应该如何正确地传递这样的道具，而不让
自动完成选择
组件知道应该传递哪个
索引

更新

我尝试过将class方法更改为currying方法，如下所示：

editTopic={(index, value) => this.editTopic(index, value)}

editTema(index) {
    return value => {
      this.setState(prevState => {
        const class = {...prevState.class};
        class.topic = [...class.topic.slice(0, index), value, ...class.topic.slice(index +1)];
        const newClass = {...prevState.class, class};
        return {class: newClass};

      })
    }
  }

editTopic ={(index) => this.editTopic(index)}

然后我就这样传下去：

editTopic={(index, value) => this.editTopic(index, value)}

editTema(index) {
    return value => {
      this.setState(prevState => {
        const class = {...prevState.class};
        class.topic = [...class.topic.slice(0, index), value, ...class.topic.slice(index +1)];
        const newClass = {...prevState.class, class};
        return {class: newClass};

      })
    }
  }

editTopic ={(index) => this.editTopic(index)}

然后在将处理程序传递给
AutocompleteSelect
的子组件中：

handleChange={editTema(index)}

onChange={(event) => this.props.handleChange(event.target.value)}

最后，在
自动完成中，选择此项：

handleChange={editTema(index)}

onChange={(event) => this.props.handleChange(event.target.value)}

但是，它仍然没有改变类组件的状态，我在控制台中甚至没有看到调用该函数。
当您将处理程序从父组件传递到子组件时，
您应该将引用传递给处理程序，而不是函数调用

因此，在传递
editTopic（）
时，您应该只传递

<Component editTopic = {this.editTopic}></Component>


应该是

editTopic={(index) => (value) => this.editTopic(index, value)}

然后


但这不是一个好的模式，因为您可能会注意到，对于不熟悉您的代码的人来说，他可能无法轻松地确定应该在某个层中提供哪个值。此外，在将来，您将发现切换到
react hooks
非常困难

我建议改为传递参数

editTopic={(index, value) => this.editTopic(index, value)}

然后

我试过你的第一种方法，但对我不起作用。方法甚至没有被调用。我已经用新代码更新了这个问题。我希望避免在自动完成组件中使用索引作为道具，这样我就可以在不使用索引的地方重用它。我刚刚发现，选择组件事件值不在目标属性中，而是在event.value中。现在它正在工作。