Question

我正在使用如下自动填充功能增强textarea：

<MentionAutocomplete ref="autocomplete">
  <Textarea ref="editor"/>
</MentionAutocomplete>

我们的想法是MentionAutocomplete可以使用textarea或input这样的任何内容，但仍可以使用。

这很好用，它可以通过自动完成功能来实现这样的键盘事件：

<div 
  className="MentionAutocomplete"
  onKeyDown={this.handleKey}
  onKeyUp={this.handleKeyUp}
>
  {this.props.children}
  {this.renderAutocomplete()}
</div>

但我最近遇到了一个问题，其中自动填充功能会抱怨field.value为undefined。我假设Textarea组件可能正在做某事，或者可能有浏览器扩展程序搞乱它。

理想情况下，我想做这样的事情：

var self = this;

<MentionAutocomplete ref="autocomplete">
  <Textarea ref="editor" onKeyUp={(event) => self.refs.autocomplete.keyUp(event) } />
</MentionAutocomplete>

但我想知道，这是正确的做法吗？还有更好的方法吗？

Answer 1

如果我正确理解您的问题，您可以在父级上定义事件处理程序，并将其传递给子级：

<div className="MentionAutocomplete">
  {React.cloneElement(this.props.children {handleEvent: this.handleEvent})}
</div>

handleEvent这是您在父级上定义的一个函数，您可以通过this.props传递事件或其他任何可用的函数。

另一种似乎非常适合您要创建的方法的方法是创建一个higher order component，它基本上将一个组件包装到另一个组件中以添加功能。

将孩子的事件传递给父母

1 个答案: