javascript - 如何在类组件中处理从父级事件处理程序传递到子级事件处理程序的附加参数

Question

我有一个父类组件，它应该处理子组件的 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};

    })
  }

我将此方法作为 Prop 传递给第一个 child ，如下所示:

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

我将这个 Prop 进一步向下传递到一个子组件，我可以在其中获取index。在那里，我使用这样的函数回调来为其提供 index 并将其传递给 select 组件，该组件将为其提供一个 value:

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

在 AutocompleteSelect 组件中，我在 onChange 处理程序中使用此回调:

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

但是，这不起作用，在 AutocompleteSelect 组件不知道应该传递哪个 index 的情况下，我应该如何正确传递这样的 props？

更新

我尝试将类方法更改为柯里化(Currying)方法，如下所示:

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)}

最后在 AutocompleteSelect 中:

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

但是，它仍然没有改变类组件的状态，我在控制台中没有看到该函数被调用。

Answer 1

应该是

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

然后

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

最后

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

<小时/>

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

我建议改为传递参数。

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

然后

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

最后

const { handleChange, index } = this.props;
...
onChange={(event) => this.props.handleChange(index, event.target.value)}