我正在使用 react-select 并且只是注意到当我在输入字段中已经有值时(通过用户类型或通过选择菜单列表中的选项),然后我模糊输入然后再次关注它 - 尝试编辑我的最后一个输入 - 它只是从头开始,而不是从输入的最后一个字符开始。我刚刚在作者的github中发现了这个问题。它是从 2 年前提出的,仍然是一个悬而未决的问题。真的没有解决方法来实现这一目标吗?
编辑 react-select 的最后一个输入
IT技术
reactjs
react-select
2021-05-08 09:21:14
1个回答
我建议您使用受控propsinputValue
并value
配对onChange
并onInputChange
喜欢以下代码:
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>
);
}
}
在 react-select v1 中,propsonSelectResetsInput
设置为false
正在做这项工作,但我想对于 v2,您需要这样做。
这里有一个活生生的例子。
其它你可能感兴趣的问题