Question

我有类基本组件，我想在其中声明一个api调用的生成器函数。我不能使用fetch.then。这是我的代码

class SearchField extends React.Component {

  componentWillUnmount() {
    this.props.clearSearchState();
  }

  handleOnFocus() {
    function* focus(){
      yield call(request, 'POST', URL, BODY)
     }
  }

  handleOnBlur() {
    this.props.handleOnBlur();
  }

  render() {
    return (
      <div>
        <input
          id={this.props.searchFieldId}
          type="text"
          value={this.props.value || ''}
          placeholder={this.props.intl.formatMessage({ id: this.props.placeholder })}
          onChange={(e) => {
            this.props.handleOnChange(e.target.value);
          }}
          className="text"
          onFocus={this.props.handleOnFocus}
          onBlur={this.props.handleOnBlur}
        />
        <button
          className="clear"
          onClick={this.props.clearFieldValue}
          style={{ display: this.props.clearButtonVisible ? 'block' : 'none' }}
        />
      </div>
    );
  }
}

这可以在我的组件中执行此操作吗？

Answer 1

据我所知，可以在（来自）React组件中拥有（和调用）生成器函数。我认为如果从handleOnFocus方法中提取生成器函数声明然后从handleOnFocus方法调用它，它应该可以工作：

  *focus() {
    yield call(request, "POST", URL, BODY);
  }

  handleOnFocus = () => {
    this.focus()._invoke();
  };

我设法调用焦点（生成器）功能并登录到控制台，你可以看看https://codesandbox.io/s/v63r54pqq3

组件内的生成器功能

1 个答案: