Question

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

我已让react-tagsinput与react-input-autosize一起使用，但当添加react-mailcheck时，我的输入表格根本不起作用，表单无法点击且无法输入和输入文字进入该领域。我在控制台中没有出现任何错误，我不确定我的代码有什么问题。我按照他们在react-mailcheck文档中所做的操作：here。我希望有人能用一双新鲜的眼睛看着它，看看我错过了什么使它无法正常工作。

谢谢！

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

我没试过这个。

尝试将支持传递给TagsInput onChange函数。

即

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

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

1 个答案: