Странное поведение при выборе входных данных и рефакторинге лучших практик

Question

Этот код работает по большей части, как и ожидалось, однако последние 5 полей ввода остаются пустыми при вводе текста, пока вы не выберете другой ввод. Я не вижу различий, которые могли бы вызвать такое поведение.

Это не всегда происходило, и я не уверен, когда это началось. Я думаю, это было, когда я удалил onSelect = {(e) => {this.setState (facebook: {linkUrl: ''})}}, который удалял URL после того, как я его ввел, а также остальную часть объекта.

import React, { Component } from 'react';

export default class EmailBuilder extends Component {
constructor(props) {
    super(props);
    this.state = {
        facebook: {
            iconUrl: 'https://s3-us-west-2.amazonaws.com/facebook.jpg',
            siteName: 'Facebook',
            linkUrl: 'Enter Facebook Link'
        },
        twitter: {
            iconUrl: 'https://s3-us-west-2.amazonaws.com/twitter.jpg',
            siteName: 'Twitter',
            linkUrl: 'Enter Twitter Link'
        },
        pinterest: {
            iconUrl: 'https://s3-us-west-2.amazonaws.com/pinterest.jpg',
            siteName: 'Pinterest',
            linkUrl: 'Enter Pinterest Link'
        },
        instagram: {
            iconUrl: 'https://s3-us-west-2.amazonaws.com/intagram.jpg',
            siteName: 'Instagram',
            linkUrl: 'Enter Instagram Link'
        },
        craigslist: {
            iconUrl: 'https://s3-us-west-2.amazonaws.com/cl.jpg',
            siteName: 'Craigslist',
            linkUrl: 'Enter Craigslist Link'
        },
        zillow: {
            iconUrl: 'https://s3-us-west-2.amazonaws.com/zillow.jpg',
            siteName: 'Zillow',
            linkUrl: 'Enter Zillow Link'
        },
        trulia: {
            iconUrl: 'https://s3-us-west-2.amazonaws.com/trulia.jpg',
            siteName: 'Trulia',
            linkUrl: 'Enter Trulia Link'
        },
        realtor: {
            iconUrl: 'https://s3-us-west-2.amazonaws.com/realtor.jpg',
            siteName: 'Realtor',
            linkUrl: 'Enter Realtor Link'
        },
        youtube: {
            iconUrl: 'https://s3-us-west-2.amazonaws.com/youtube.jpg',
            siteName: 'Youtube',
            linkUrl: 'Enter Youtube Link'
        },
        corymeyer: {
            iconUrl: 'https://s3-us-west-2.amazonaws.com/cropped+logo.png',
            siteName: 'Cory Meyer',
            linkUrl: 'Enter CoryMeyer.com link'
        },
        simplelisting: {
            iconUrl: '',
            siteName: 'SimpleListing.com',
            linkUrl: 'Enter SimpleListing.com link'
        }
    }
    this.handleClick = this.handleClick.bind(this);
}

static matchListingInfo(props, prop, str){
    for(var key in props) {
        var value = props[key];
        if(key === prop){
            return !!props[key].includes(str)?true:false;
        }
    }
}
static getListingInfo(props, prop){
    for(var key in props) {
        var value = props[key];
        if(key === prop){
            return value;
        }
    }
}
handleClickCs(){

    //console.log(csEmailHtml);
    console.log('hi');
}
handleClick(){
    function copyText (text) {
        // Create the textarea input to hold our text.
        const element = document.createElement('textarea');
        element.value = text;
        // Add it to the document so that it can be focused.
        document.body.appendChild(element);
        // Focus on the element so that it can be copied.
        element.focus();
        element.setSelectionRange(0, element.value.length);
        // Execute the copy command.
        document.execCommand('copy');
        // Remove the element to keep the document clear.
        document.body.removeChild(element);
        // Return to Facebook
    }   
    const status = EmailBuilder.getListingInfo(this.props.listingInfo, 'Status'); console.log(`Status: ${status}`);
    const imageCs = EmailBuilder.getListingInfo(this.props.listingInfo, 'Image');
    const urlCs = EmailBuilder.getListingInfo(this.props.listingInfo, 'url')


    const stata = {
        newPrice: 'homes NEW PRICE has updated and is',         
        justListed: 'home is ACTIVE and',
        comingSoon: 'home is COMING SOON and is'
    }

    let links = '';
    let emailHtml = '';
    let body = `<p>Hello {first_name},</p> <p>Your ${!!status.includes('Price')?stata.newPrice:!!status.includes('Coming')?stata.comingSoon:!!status.includes('Just')?stata.justListed:''} being marketed in all these places and more! Please feel free to click the icons below to see how we have done, then LIKE &amp; SHARE on your own social media accounts. This only helps us spread the word about your property faster! If you have any questions please let me know.</p>`;



    console.log(`this.props.listingInfo: ${JSON.stringify(this.props.listingInfo)}`);


    Object.keys(this.state).map((key) => {
        console.log(`linkUrl: ${this.state[key].linkUrl}`);
        console.log(`state: ${JSON.stringify(this.state[key])}`);

        if( !this.state[key].linkUrl.includes('Enter') ){


            emailHtml = `<div class="content" style="margin: 1em;"><div class="icon"> <a href="${this.state[key].linkUrl}" target="_blank"> <img style=" width:128px;" src="${this.state[key].iconUrl}"> </a></div><div class="linkText" style="text-align: center;"><p style="color: #222222; font-family: sans-serif; font-size: 1em; font-weight: 900; "> <a href="${this.state[key].linkUrl}" target="_blank">${this.state[key].siteName}</a></p></div></div>`;
            links += emailHtml;
            console.log(emailHtml);
        }
    });




    let html = `<div>${body} <div style="display: flex; flex-direction: row; flex-wrap: wrap;">${links}</div></div>`

    copyText(html);

}



render() {
    return (
        <div id='emailBuilder'>
            <div className='subHeader'>
                <h1>Email Builder</h1> 
            </div>
            <div id='email_links'>  
                <div> 
                    <input id='facebook_link' 
                        className='eInput' 
                        placeHolder={ this.state.facebook.linkUrl } 
                        onChange={
                            (e) => {
                                var newState = this.state.facebook;
                                newState.linkUrl = e.target.value;
                                this.setState( { facebook: newState } )
                            }
                        } /> 
                </div>
                <div> 
                    <input id='twitter_link' 
                        className='eInput' 
                        placeHolder={ this.state.twitter.linkUrl } 
                        onChange={
                            (e) => {
                                var newState = this.state.twitter;
                                newState.linkUrl = e.target.value;
                                this.setState( { twitter: newState } )
                            }
                        } />
                </div>
                <div> 
                    <input id='pinterest_link' 
                        className='eInput' 
                        placeHolder={ this.state.pinterest.linkUrl } 
                        onChange={
                            (e) => {
                                var newState = this.state.pinterest;
                                newState.linkUrl = e.target.value;
                                this.setState( { pinterest: newState } )
                            }
                        } />
                </div>
                <div> 
                    <input id='instagram_link' 
                        className='eInput' 
                        placeHolder={ this.state.instagram.linkUrl } 
                        onChange={
                            (e) => {
                                var newState = this.state.instagram;
                                newState.linkUrl = e.target.value;
                                this.setState( { instagram: newState } )
                            }
                        } />
                </div>
                <div> 
                    <input id='craigslist_link' 
                        className='eInput' 
                        placeHolder={ this.state.craigslist.linkUrl } 
                        onChange={
                            (e) => {
                                var newState = this.state.craigslist;
                                newState.linkUrl = e.target.value;
                                this.setState( { craigslist: newState } )
                            }
                        } />
                </div>
                <div> 
                    <input id='zillow_link' 
                        className='eInput' 
                        placeHolder={ this.state.zillow.linkUrl } 
                        onChange={
                            (e) => {
                                var newState = this.state.zillow;
                                newState.linkUrl = e.target.value;
                                this.setState( { zillow: newState } )
                            }
                        } />
                </div>
                <div> 
                    <input id='trulia_link' 
                        className='eInput' 
                        placeHolder={ this.state.trulia.linkUrl } 
                        onChange={
                            (e) => {
                                var newState = this.state.trulia;
                                newState.linkUrl = e.target.value;
                                this.setState( { trulia: newState } )
                            }
                        } /> 
                </div>
                <div> 
                    <input id='realtor_link' 
                        className='eInput' 
                        placeHolder={ this.state.realtor.linkUrl } 
                        onChange={
                            (e) => {
                                var newState = this.state.realtor;
                                newState.linkUrl = e.target.value;
                                this.setState( { realtor: newState } )
                            }
                        } />
                </div>
                <div> 
                    <input id='youtube_link' 
                        className='eInput' 
                        placeHolder={ this.state.youtube.linkUrl } 
                        onChange={
                            (e) => {
                                var newState = this.state.youtube;
                                newState.linkUrl = e.target.value;
                                this.setState( { youtube: newState } )
                            }
                        } />
                </div>
                <div> 
                    <input id='corymeyer_link' 
                        className='eInput' 
                        placeHolder={ this.state.corymeyer.linkUrl} 
                        onChange={
                            (e) => {
                                var newState = this.state.corymeyer;
                                newState.linkUrl = e.target.value;
                                this.setState( { corymeyer: newState } )
                            }
                        } />
                </div>
                <div> 
                    <input id='simplelisting_link' 
                        className='eInput' 
                        placeHolder={ this.state.simplelisting.linkUrl } 
                        onChange={
                            (e) => {
                                var newState = this.state.simplelisting;
                                newState.linkUrl = e.target.value;
                                this.setState( { simplelisting: newState } )
                            }
                        } />
                </div>
                <div id='buttons'>
                    <button id='email_button' 
                        className='btn'
                        style={{marginLeft: 0}}
                        onClick={this.handleClick} 
                        >Copy Email Code</button>
                    { /*EmailBuilder.matchListingInfo(this.props.listingInfo, 'Status', 'Coming') && 
                    <button id='cs_email_button'
                        className='btn'
                        onClick={this.handleClickCs}
                        >Copy CS Email Code</button>*/
                    }
                </div>
            </div>
        </div>
    );
  }
}

Помимо нечетных проблем с пользовательским интерфейсом, похоже, все работает. Я пытаюсь понять, почему он ведет себя странно, и также был бы признателен за лучший способ написать это, поскольку он кажется слишком явным, если мне нужно Object.keys (this.state) .map ((key) => {jsx here}, чтобы сделать входы?