Question

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

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

这是我想要实现的目标：

<MyCombobox onSelect={handleSelect} />

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

Answer 1

一种可能的解决方法如下

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

有效的示例是here

Answer 2

从今天早上开始的所有谷歌搜索工作中，我设法将一些有用的东西拼凑在一起（来自众多来源）：

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;

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

2 个答案: