时间戳

首页 > 解决方案 > 如何在 TypeScript 中创建一个让我处理事件的 React 组件？

reactjs - 如何在 TypeScript 中创建一个让我处理事件的 React 组件？

问题描述

我想使用TypeScript在 React 中创建一个自定义组件，它本质上是一个具有自动完成/搜索功能的组合框，连接到它自己的远程存储。我想做的是发送一个“onSelect”事件，以便我可以在我的应用程序中使用该组件的任何地方接收所选项目。

用远程存储做自动完成/搜索的东西很容易，但是 React 组件的东西让我很难过。我仍然在学习两者，所以也许我想在我能爬行之前走路，但是当我知道应该有可能实现更优雅的结果时，我不想开始制造混乱。我只需要找到某种指南，但到目前为止我还没有找到。

这是我想要实现的目标：

<MyCombobox onSelect={handleSelect} />

handleSelect 函数将在我需要使用 MyCombobox 组件的整个应用程序中使用。当然，该函数需要接受一个参数（这是我目前在 TS 中遇到的问题）。

标签： reactjstypescript

解决方案

一种可能的解决方案如下

import * as React from "react";
import { render } from "react-dom";

interface MyComboProps {
    // Here props from parent should be defined
}

interface MyComboState {
    ValuesToShow: string[];
    SearchValue: string;
}

class StringSearchMenu extends React.Component<MyComboProps, MyComboState> {
    constructor(p: MyComboProps) {
        super(p);
        this.state = {
            ValuesToShow: [],
            SearchValue: ""
        };
    }

    protected selectString(event: React.ChangeEvent<HTMLInputElement>): void {
        let value = event.target.value;
        if (value === "") this.setState({ ValuesToShow: [] });
        else {
            /* here you can put fetch logic. I use static array as example */
            let possibleValues = ["Green", "Red", "Blue", "Yellow", "Black"];
            this.setState({
                ValuesToShow: possibleValues.filter(f => f.indexOf(value) > -1)
            });
        }
    }

    render() {
        return (
            <div>
                Enter value to search {"   "}
                <input onChange={this.selectString.bind(this)} />
                <div>
                    {this.state.ValuesToShow.map(v => (
                        <div>{v}</div>
                    ))}
                </div>
           </div>
      );
      }
}

工作示例在这里

推荐阅读