语义 UI 搜索 - 下拉选择不填充输入

Question

我正在使用 Semantic UI React 构建输入组件。我希望它在获得焦点时打开下拉菜单，而不是默认行为，即在用户更改搜索字符串时显示结果。我正在使用他们网站上提供的道具 here。

这是我的一些相关代码：

constructor(props) {
  super(props);
  this.handleResultSelect = this.handleResultSelect.bind(this);
  this.handleFocusSearch = this.handleFocusSearch.bind(this);
  this.handleBlurSearch = this.handleBlurSearch.bind(this);
  this.state = ({
    results: [{
      "title": "Roob, Cummerata and Watsica"
    },
    {
      "title": "Stanton, Kessler and Walsh"
    },
    {
      "title": "Boyle, Schuppe and Renner"
    }],
    value: '',
    open: false,
  });
}

handleBlurSearch () {
  this.setState({ 
    open: false,
    focused: false,
  });
}

handleFocusSearch () {
  this.setState({ 
    open: true,
    focused: true,
  });
}

handleResultSelect(e, {result}) {
  this.setState({ value: result.title });
}

render() {
  var searchProps = {
    input: <input className='custom-form-field' placeholder={this.props.placeholder}/>,
    open: this.state.open,
    onFocus: this.handleFocusSearch,
    onBlur: this.handleBlurSearch,
    results: this.state.results,
    onResultSelect: this.handleResultSelect,
    value: this.state.value,
  };

  return ( 
    <SemanticUI.Search {...searchProps} />
  );
}

但是，在 select 搜索结果时，结果标题值未在输入值中设置。此外，在调试时，我发现 handleResultSelect 甚至没有被调用。

我的第一个猜测是 onBlur 导致结果下拉列表关闭，结果 select 事件被忽略。不过我不确定；我是 React 和 Semantic 的新手。

欢迎任何解决这个问题的帮助。

Answer 1

尝试将 value 属性添加到 searchProps。此外，onBlur 事件和 onResultSelect 相互冲突，因此我使用 lodash.debounce 函数添加了延迟。

所以，像这样

class SearchExampe extends React.Component {
  constructor(props) {
    super(props);
    this.handleResultSelect = this.handleResultSelect.bind(this);
    this.handleFocusSearch = this.handleFocusSearch.bind(this);
    this.handleBlurSearch = this.handleBlurSearch.bind(this);
    this.handleSearchChange = this.handleSearchChange.bind(this);

    this.state = {
      results: [
        {
          title: "Roob, Cummerata and Watsica"
        },
        {
          title: "Stanton, Kessler and Walsh"
        },
        {
          title: "Boyle, Schuppe and Renner"
        }
      ],
      value: " ",
      open: true
    };
  }

  handleSearchChange(e) {
    this.setState({ value: e.target.value });
  }

  handleBlurSearch() {
    this.setState({
      open: false,
      focused: false
    });
  }

  handleFocusSearch() {
    this.setState({
      open: true,
      focused: true
    });
  }

  handleResultSelect(e) {
    this.setState({ value: e.target.value, open: false });
  }

  render() {
    var searchProps = {
      input: <input className="custom-form-field" onChange={this.handleSearchChange} placeholder="placeholder" />,
      open: this.state.open,
      onFocus: this.handleFocusSearch,
      onBlur: _.debounce(this.handleBlurSearch, 100, {}),
      results: this.state.results,
      onResultSelect: this.handleResultSelect,
      value: this.state.value
    };

    return <Search {...searchProps} />;
  }
}

Answer 2

另一个选择，看Dropdown组件。下拉列表中的搜索选择示例可能会显示您尝试创建的行为。

https://react.semantic-ui.com/modules/dropdown/#types-search-selection

Answer 3

我非常感谢 R. Wright 的回答，但是添加到下拉菜单模糊的 200 毫秒延迟不符合用户体验标准。所以我深入研究了 javascript 的 blur，发现它有一个 relatedTarget 属性，可以用来查看点击的是哪个元素。

请注意，这仅适用于具有 tabindex 属性的 DOM 元素，因此我还必须修改 Semantic Search 的结果渲染器以使每个结果都有一个属性tabindex=0。此外，可以覆盖应用于具有 tabindex 的元素的默认焦点 CSS。

使用它，我编辑了 handleBlur 以设置 open: true if _.contains(event.relatedTarget.classList, 'title')。

这是我的一些相关代码：

constructor(props) {
  super(props);
  this.handleResultSelect = this.handleResultSelect.bind(this);
  this.handleFocusSearch = this.handleFocusSearch.bind(this);
  this.handleBlurSearch = this.handleBlurSearch.bind(this);
  this.state = ({
    results: [{
      "title": "Roob, Cummerata and Watsica"
    },
    {
      "title": "Stanton, Kessler and Walsh"
    },
    {
      "title": "Boyle, Schuppe and Renner"
    }],
    value: '',
    open: false,
  });
}

handleBlurSearch (event) {
  let open = _.contains(event.relatedTarget.classList, 'title');
  this.setState({ 
    open: open,
    focused: false,
  });
}

handleFocusSearch () {
  this.setState({ 
    open: true,
    focused: true,
  });
}

handleResultSelect(e, {result}) {
  this.setState({ value: result.title, open: false });
}

render() {
  var searchProps = {
    input: <input className='custom-form-field' placeholder={this.props.placeholder}/>,
    open: this.state.open,
    onFocus: this.handleFocusSearch,
    onBlur: this.handleBlurSearch,
    results: this.state.results,
    onResultSelect: this.handleResultSelect,
  };

  return ( 
    <SemanticUI.Search {...searchProps} />
  );
}

语义 UI 搜索 - 下拉选择不填充输入

SemanticUI Search - Dropdown selection does not populate input

javascript

dom-events

reactjs

semantic-ui-react