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

Question

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

使用远程商店进行自动完成/搜索很容易，但React组件的工作让我感到困惑。我仍然在学习这两种方法，所以我可能在爬之前就尝试着走路，但我不想一开始就制造混乱，因为我知道应该可以实现更优雅的结果。我只是想找些指南，但到目前为止我还没有找到。

以下是我想实现的目标：

<MyCombobox onSelect={handleSelect} />

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

Answer 1

从我今天早上做的所有谷歌搜索中，我成功地拼凑出了一些有用的东西（从大量来源）：

App.tsx：

import React from 'react';
import './App.css';

import MyCombobox from './MyCombobox';

class App extends React.Component {

    receiveSomething(something: string) {
        alert('Something: ' + something);
    }

    render() {
        return (
            <div>
                <MyCombobox receiveSomething={this.receiveSomething} defaultValue="qwerty" />
            </div>
        );
    }
}

export default App;

MyCombobox.tsx：

import React from 'react';

export interface IMyCombobox {
    defaultValue: string,
    receiveSomething:(name:string) => void
}

class MyCombobox extends React.PureComponent<IMyCombobox, any> {

    state = {
        something: this.props.defaultValue
    }

    sendSomething() {  
        this.props.receiveSomething(this.state.something);  
    }

    handleChange = (event: any) : void => {
        this.setState({ 
            something: event.target.value
        });
    }

    render() {
        return (
            <div>
                <input 
                    type='text'
                    maxLength={20}
                    value={this.state.something} 
                    onChange={this.handleChange} />

                <input 
                    type='button' 
                    value='Send Something'
                    onClick={this.sendSomething.bind(this)} />
            </div>
        )
    }
}

export default MyCombobox;

Answer 2

一种可能的解决方案如下

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>
      );
      }
}

这里是一个有效的例子