React - react-tagsinputとreact-mailcheckを使用して入力フォームをクリックまたは入力することができません

Question

私はreact-tagsinput、react-input-autosize、およびreact-mailcheckを使用して、入力タグを作成して、ユーザーが電子メールアドレスでスペルミスしたときに正しいドメインを示唆しています。

私は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

私はこれを試していません。

TagsInputの小道具としてonChange機能を渡してみてください。

すなわち

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