0 Câu hỏi: Hành vi kỳ lạ khi chọn đầu vào và tái cấu trúc các thực tiễn tốt nhất

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Mã này hoạt động cho hầu hết các phần như mong đợi, tuy nhiên 5 trường nhập cuối cùng vẫn trống trong khi nhập văn bản cho đến khi bạn chọn một đầu vào khác. Tôi không thấy bất kỳ sự khác biệt nào sẽ gây ra hành vi này.

Điều này không phải lúc nào cũng xảy ra và không chắc chắn khi nào nó bắt đầu .. Tôi nghĩ đó là khi tôi xóa onSelect = {(e) = > {this.setState (facebook: {linkUrl: ''})}} đã xóa url sau khi tôi nhập nó, cũng như phần còn lại của đối tượng.

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>
    );
  }
}

Bên cạnh các vấn đề về trải nghiệm người dùng kỳ lạ, mọi thứ dường như đang hoạt động. Tôi đang cố gắng hiểu lý do tại sao nó hành xử kỳ lạ và cũng sẽ đánh giá cao cách viết tốt hơn vì nó quá rõ ràng, tôi nên Object.keys (this.state) .map ((key) = > {jsx ở đây} để thực hiện đầu vào?

    
0
  1. Một Codeandbox sẽ hữu ích ở đây
    2019-05-08 16: 21: 21Z
  2. Nghe giống như một vấn đề gỡ lỗi thông thường. Sử dụng devtools và tiện ích mở rộng React devtools.
    2019-05-08 16: 49: 15Z
  3. Không chắc chắn điều gì đã thay đổi nhưng đây không còn là vấn đề nữa.
    2019-05-09 03: 59: 00Z
0 Câu trả lời                              0                         
nguồn đặt đây