javascript - React - 无法使用react-tagsinput和react-mailcheck单击或输入输入表单

Question

我正在使用 react-tagsinput、react-input-autosize 和 react-mailcheck 创建输入标签，该标签也建议正确的当用户在电子邮件地址中拼错域名时。

我已经让 react-tagsinput 与 react-input-autosize 一起使用，但是当添加 react-mailcheck 时，我的输入表单确实如此根本不起作用，表单不可点击，无法在字段中输入文本。我在控制台中没有收到任何错误，并且不确定我的代码有什么问题。我按照他们在 react-mailcheck 文档中所做的操作:https://github.com/eligolding/react-mailcheck 。我希望有人能用一双新的眼睛来看待它，看看我错过了什么，导致它不起作用。

谢谢!

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TagsInput from 'react-tagsinput';
import AutosizeInput from 'react-input-autosize';
import MailCheck from 'react-mailcheck';


class EmailInputTags extends Component {
    static propTypes = {
        label: PropTypes.string.isRequired,
        name: PropTypes.string.isRequired,
    };

    constructor() {
        super();
        this.state = { tags: [], inputText: '' };

       this.handleChange = this.handleChange.bind(this);
       this.handleInputText = this.handleInputText.bind(this);
       this.renderInput = this.renderInput.bind(this);
    }

    handleChange(tags) {
        this.setState({ tags });
    }

    handleInputText(e) {
        this.setState({ inputText: e.target.value });
    }

    renderInput({ addTag, ...props }) {
        const { ...other } = props;
        return (
            <MailCheck email={this.state.inputText}>
                {suggestion => (
                    <div>
                        <AutosizeInput
                            type="text"
                            value={this.state.inputText}
                            onChange={this.handleInputText}
                            {...other}
                        />
                        {suggestion &&
                        <div>
                            Did you mean {suggestion.full}?
                        </div>
                        }
                    </div>
                )}
            </MailCheck>
        );
    }

    render() {
        const { label, name } = this.props;

        return (
            <div className="input-tag-field">
                <TagsInput inputProps={{ placeholder: '', className: 'input-tag' }} renderInput={this.renderInput} value={this.state.tags} onChange={this.handleChange} />
                <label htmlFor={name}>{label}</label>
            </div>
        );
    }
}

export default EmailInputTags;

Answer 1

我还没有尝试过这个。

尝试将 onChange 函数作为 prop 传递给 TagsInput。

即

{... onChange={(e) => {this.setState(inputText: e.target.value}}