反應 - 無法使用react-tagsinput和react-mailcheck單擊或鍵入輸入表單

我正在使用react-tagsinput,react-input-autosize和react-mailcheck創建輸入標記，當用戶在電子郵件地址中拼寫錯誤時，也會建議輸入標記。反應 - 無法使用react-tagsinput和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;

來源

2017-07-26 applechips

我還沒有試過這個。

嘗試將作爲道具傳遞給Tags輸入onChange函數。

即

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

來源

2017-07-26 22:06:09

感謝，有點幫助！我可以console.log，當我輸入的東西，然後按回車。但沒有我需要的包的工作。 – applechips

@applechips，請參閱更新的響應。因爲您將'this.state.inputText'傳遞給郵件檢查，您需要在'onChange'中更新該狀態 –

反應 - 無法使用react-tagsinput和react-mailcheck單擊或鍵入輸入表單

回答

相關問題