编辑 react-select 的最后一个输入 [英] edit the last input of react-select

问题描述

我正在使用 react-select，只是注意到当我在输入字段中已经有值时(通过用户类型或通过选择菜单列表中的选项)，然后我模糊输入然后再次关注它 - 试图编辑我的最后一个输入 - 它只是从头开始，而不是从输入的最后一个字符开始.我刚刚在作者的 github 中发现了这个 issue.它是从 2 年前提出的，仍然是一个悬而未决的问题.真的没有解决方法来实现这一目标吗?

解决方案

我建议你使用受控道具 inputValue 和 value 与 onChange 对> 和 onInputChange 就像下面的代码:

class App 扩展组件 {构造函数(道具){超级(道具)；this.state = {输入值:"，价值: ""};}onInputChange = (option, { action }) =>{控制台日志(选项，动作)；如果(动作 ===输入变化"){const optionLength = option.length;const inputValue = this.state.inputValue;const inputValueLength = inputValue.length;const newInputValue =选项长度<输入值长度?选项: this.state.inputValue + option[option.length - 1];this.setState({输入值:新输入值});}};onChange = 选项 =>{this.setState({值:选项});};使成为() {返回 (<div className="应用程序"><选择选项={选项}onChange={this.onChange}onInputChange={this.onInputChange}inputValue={this.state.inputValue}值={this.state.value}/>

);}}

在 react-select v1 中，设置为 false 的 props onSelectResetsInput 正在做这项工作，但我想对于 v2，你需要这样做.

这是一个现场示例.

I am using react-select and just notice that when I already have value in the input field (either by user type or by choosing the option in menu list), then I blur the input then focus at it again - trying to edit my last input - its just start over from the beginning, not continue from the last character of the input. I just found this issue in the author's github. Its been raised from 2 years ago and still an open issue. Is there really no workaround to achieve this?

解决方案

I recommend you to use controlled props inputValue and value pair with onChange and onInputChange like the following code:

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

    this.state = {
      inputValue: "",
      value: ""
    };
  }
  onInputChange = (option, { action }) => {
    console.log(option, action);
    if (action === "input-change") {
      const optionLength = option.length;
      const inputValue = this.state.inputValue;
      const inputValueLength = inputValue.length;

      const newInputValue =
        optionLength < inputValueLength
          ? option
          : this.state.inputValue + option[option.length - 1];
      this.setState({
        inputValue: newInputValue
      });
    }
  };
  onChange = option => {
    this.setState({
      value: option
    });
  };
  render() {
    return (
      <div className="App">
        <Select
          options={options}
          onChange={this.onChange}
          onInputChange={this.onInputChange}
          inputValue={this.state.inputValue}
          value={this.state.value}
        />
      </div>
    );
  }
}

In react-select v1 the props onSelectResetsInput set to false was doing this job but I guess for v2 you will need to do the trick.

Here a live example.

这篇关于编辑 react-select 的最后一个输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！