如何将值输入到 componentDidMount 中的 react-select 组件

Question

在我的组件的 componentDidMount() 中，我想寻找一个 window.location.hash 值，如果找到了，将它输入到我的 React Select 组件中，然后让组件运行就像我将这个值输入其中一样。也就是说，菜单打开，选项按此值过滤，出现清除按钮，光标位于值的末尾，单击框内任意位置打开或关闭菜单。

我现在所拥有的，不会那样做。该值进入框中，出现清除按钮并打开菜单，但光标转到开头，它不会过滤菜单，如果没有焦点，单击框只会打开菜单。 https://codesandbox.io/s/pjok544nrx#grape

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

import "./styles.css";

const options = [
  {
    label: "apple",
    value: "APPLE"
  },
  {
    label: "orange",
    value: "ORANGE"
  },
  {
    label: "banana",
    value: "BANANA"
  },
  {
    label: "strawberry",
    value: "STRAWBERRY"
  }
];

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      menuIsOpen: true
    };
    this.searchRef = React.createRef();
  }

  componentDidMount() {
    let hash = window.location.hash;
    hash = "grape"; // just to get this working in codesandbox's iframe
    if (hash) {
      this.searchRef.current.select.setValue({
        value: hash.toUpperCase(),
        label: hash
      });
    this.searchRef.current.select.focus();
    }
  }

  onInputChange = (options, { action }) => {
    if (action === "menu-close") {
      this.setState({ menuIsOpen: false });
    }
  };

  onFocus = e => {
    this.setState({ menuIsOpen: true });
  };
  render() {
    return (
      <div className="App">
        <Select
          isClearable={true}
          isSearchable={true}
          options={options}
          onFocus={this.onFocus}
          onInputChange={this.onInputChange}
          menuIsOpen={this.state.menuIsOpen}
          ref={this.searchRef}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我试过几种设置组合，但没有成功。有什么想法吗？

Answer 1

不要在 componentDidMount 中修改 select 的值，而是在 render 期间设置其 默认值 。（在 React 中通常应避免手动修改元素。）

react-select 提供了两个可能的属性来设置默认值：defaultValue and defaultInputValue。 defaultInputValue 似乎最适合您的情况，因为它是一个 "tentative" 值，就好像用户输入了搜索查询一样。

这是代码的更新部分：

  render() {
    let hash = window.location.hash || "grape";
    return (
      <div className="App">
        <Select
          defaultInputValue={hash}
          // and all the other props from before
        />
      </div>
    );
  }

  componentDidMount() {
    let hash = window.location.hash || "grape";
    if (hash) {
      this.searchRef.current.select.focus();
    }
  }

请注意，聚焦逻辑仍然属于 componentDidMount，在这种情况下使用 ref 是可以的。

如何将值输入到 componentDidMount 中的 react-select 组件

How to enter a value into a react-select component in componentDidMount

reactjs

react-select