reactjs - 为什么这个组件在转换为 React-Hooks 时不起作用?(对此状态和解构部分感到困惑)
问题描述
基本上试图为预订引擎创建自动完成功能代码在类组件中想要将其转换为具有 React Hooks 的功能组件。尝试转换但我的代码显示了几个警告。如果需要,可以提供任何代码片段。(如何转换 this.state 并解构 this 关键字)
从“反应”导入反应,{组件,片段};从“prop-types”导入 PropTypes;
class AutocompleteClass extends Component {
static propTypes = {
suggestions: PropTypes.instanceOf(Array)
};
static defaultProps = {
suggestions: []
};
constructor(props) {
super(props);
this.state = {
// The active selection's index
activeSuggestion: 0,
// The suggestions that match the user's input
filteredSuggestions: [],
// Whether or not the suggestion list is shown
showSuggestions: false,
// What the user has entered
userInput: ""
};
}
onChange = e => {
const { suggestions } = this.props;
const userInput = e.currentTarget.value;
// Filter our suggestions that don't contain the user's input
const filteredSuggestions = suggestions.filter(
suggestion =>
suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
);
this.setState({
activeSuggestion: 0,
filteredSuggestions,
showSuggestions: true,
userInput: e.currentTarget.value
});
};
onClick = e => {
this.setState({
activeSuggestion: 0,
filteredSuggestions: [],
showSuggestions: false,
userInput: e.currentTarget.innerText
});
};
onKeyDown = e => {
const { activeSuggestion, filteredSuggestions } = this.state;
// User pressed the enter key
if (e.keyCode === 13) {
this.setState({
activeSuggestion: 0,
showSuggestions: false,
userInput: filteredSuggestions[activeSuggestion]
});
}
// User pressed the up arrow
else if (e.keyCode === 38) {
if (activeSuggestion === 0) {
return;
}
this.setState({ activeSuggestion: activeSuggestion - 1 });
}
// User pressed the down arrow
else if (e.keyCode === 40) {
if (activeSuggestion - 1 === filteredSuggestions.length) {
return;
}
this.setState({ activeSuggestion: activeSuggestion + 1 });
}
};
render() {
const {
onChange,
onClick,
onKeyDown,
state: {
activeSuggestion,
filteredSuggestions,
showSuggestions,
userInput
}
} = this;
let suggestionsListComponent;
if (showSuggestions && userInput) {
if (filteredSuggestions.length) {
suggestionsListComponent = (
<ul class="suggestions">
{filteredSuggestions.map((suggestion, index) => {
let className;
// Flag the active suggestion with a class
if (index === activeSuggestion) {
className = "suggestion-active";
}
return (
<li className={className} key={suggestion} onClick={onClick}>
{suggestion}
</li>
);
})}
</ul>
);
} else {
suggestionsListComponent = (
<div class="no-suggestions">
<em>No suggestions, you're on your own!</em>
</div>
);
}
}
return (
<Fragment>
<input
type="text"
onChange={onChange}
onKeyDown={onKeyDown}
value={userInput}
/>
{suggestionsListComponent}
</Fragment>
);
}
}
export default AutocompleteClass;
解决方案
推荐阅读
- node.js - BEP-20 代币交易中被低估的交易
- flutter - 我将我的 shell 切换为 fish 并且我的颤动命令被破坏了。我该如何解决?
- java - onRequestPermissionsResult 在 Android Fragment 中已弃用
- categories - 父类别
- ansible - 剧本不返回任何值
- kubernetes - 从已完成的 pod 'kubernetes' 中检索输出
- systemd - systemd 如何停止服务
- google-drive-api - 如何使用任务调度程序运行 python (pycharm) 文件来搜索 excel 文件?
- api - Big Commerce API - 更新产品自定义字段 - 422 错误
- sql - 将 varchar/timestamp col 转换为 Date 字段