2017-03-03 14 views
5

नीचे मेरे घटक में, इनपुट फ़ील्ड एक चरित्र टाइप करने के बाद फोकस खो देता है। क्रोम के इंस्पेक्टर का उपयोग करते समय, ऐसा लगता है कि टाइपिंग के दौरान इनपुट फ़ील्ड की मान विशेषता के बजाय पूरे फॉर्म को फिर से प्रस्तुत किया जा रहा है।प्रतिक्रिया ईएस 6 में, एक अक्षर टाइप करने के बाद इनपुट फ़ील्ड फोकस क्यों खो देता है?

मुझे या तो एस्लिंट और न ही क्रोम इंस्पेक्टर से कोई त्रुटि नहीं मिलती है।

फॉर्म सबमिट करना वास्तविक इनपुट फ़ील्ड के रूप में काम करता है जब यह रेंडर की वापसी में या एक अलग घटक के रूप में आयात किया जाता है, लेकिन यह नहीं कि मैंने इसे नीचे कोड किया है।

ऐसा क्यों है?

मुख्य पृष्ठ घटक

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as actionPost from '../redux/action/actionPost'; 
import InputText from './form/InputText'; 
import InputSubmit from './form/InputSubmit'; 

class _PostSingle extends Component { 
    constructor(props, context) { 
     super(props, context); 
     this.state = { 
      post: { 
       title: '', 
      }, 
     }; 
     this.onChange = this.onChange.bind(this); 
     this.onSubmit = this.onSubmit.bind(this); 
    } 
    onChange(event) { 
     this.setState({ 
      post: { 
       title: event.target.value, 
      }, 
     }); 
    } 
    onSubmit(event) { 
     event.preventDefault(); 
     this.props.actions.postCreate(this.state.post); 
     this.setState({ 
      post: { 
       title: '', 
      }, 
     }); 
    } 
    render() { 
     const onChange = this.onChange; 
     const onSubmit = this.onSubmit; 
     const valueTitle = this.state.post.title; 
     const FormPostSingle =() => (
      <form onSubmit={onSubmit}> 
       <InputText name="title" label="Title" placeholder="Enter a title" onChange={onChange} value={valueTitle} /> 
       <InputSubmit name="Save" /> 
      </form> 
     ); 
     return (
      <main id="main" role="main"> 
       <div className="container-fluid"> 
        <FormPostSingle /> 
       </div> 
      </main> 
     ); 
    } 
} 

_PostSingle.propTypes = { 
    actions: PropTypes.objectOf(PropTypes.func).isRequired, 
}; 

function mapStateToProps(state) { 
    return { 
     posts: state.posts, 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(actionPost, dispatch), 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(_PostSingle); 

पाठ इनपुट घटक

import React, { PropTypes } from 'react'; 

const InputText = ({ name, label, placeholder, onChange, value, error }) => { 
    const fieldClass = 'form-control input-lg'; 
    let wrapperClass = 'form-group'; 
    if (error && error.length > 0) { 
     wrapperClass += ' has-error'; 
    } 
    return (
     <div className={wrapperClass}> 
      <label htmlFor={name} className="sr-only">{label}</label> 
      <input type="text" id={name} name={name} placeholder={placeholder} onChange={onChange} value={value} className={fieldClass} /> 
      {error && 
       <div className="alert alert-danger">{error}</div> 
      } 
     </div> 
    ); 
}; 

InputText.propTypes = { 
    name: PropTypes.string.isRequired, 
    label: PropTypes.string.isRequired, 
    placeholder: PropTypes.string.isRequired, 
    onChange: PropTypes.func.isRequired, 
    value: PropTypes.string, 
    error: PropTypes.string, 
}; 

InputText.defaultProps = { 
    value: null, 
    error: null, 
}; 

export default InputText; 

सबमिट बटन घटक

import React, { PropTypes } from 'react'; 

const InputSubmit = ({ name }) => { 
    const fieldClass = 'btn btn-primary btn-lg'; 
    return (
     <input type="submit" value={name} className={fieldClass} /> 
    ); 
}; 

InputSubmit.propTypes = { 
    name: PropTypes.string, 
}; 

InputSubmit.defaultProps = { 
    name: 'Submit', 
}; 

export default InputSubmit; 

उत्तर

0

जब आप किसी वर्ण में टाइप करते हैं तो आपका फॉर्म फिर से प्रस्तुत किया जाता है, क्योंकि आपके पास onChange विधि है, जो राज्य को बदलती है। प्रत्येक राज्य परिवर्तन फॉर्म को फिर से प्रस्तुत करने का कारण बनता है और यही कारण है कि इनपुट विधि फोकस खो रही है।

चूंकि आप रेडक्स का उपयोग कर रहे हैं, इसलिए सबसे अच्छा तरीका रेडक्स ऑब्जेक्ट में पोस्ट शीर्षक मान को संग्रहीत करना होगा। साथ ही, आप अपने फॉर्म के लिए redux-form का उपयोग करना चाह सकते हैं।

re-rendering के बिना इनपुट का मूल्य प्राप्त करने के लिए आपको refs का उपयोग करने की आवश्यकता है।

2

क्या हो रहा है यह है:

अपने onChange घटना आग, कॉलबैक कॉल नया शीर्षक मूल्य है, जो एक आधार के रूप में अपने पाठ क्षेत्र के लिए पारित हो जाता है के साथ setState। उस बिंदु पर, प्रतिक्रिया इसे फिर से प्रस्तुत करती है, यही कारण है कि आप फोकस खो देते हैं।

मेरा पहला सुझाव आपके घटकों की कुंजी, विशेष रूप से फॉर्म और इनपुट स्वयं प्रदान करना होगा। कुंजी रेंडर के माध्यम से घटकों की पहचान को बनाए रखने के लिए प्रतिक्रिया की अनुमति देते हैं।

-1

ऐसा इसलिए है क्योंकि आप रेंडर() के अंदर फ़ंक्शन में फ़ॉर्म प्रस्तुत कर रहे हैं।

हर बार जब आपका राज्य/प्रोप बदलता है, तो फ़ंक्शन एक नया रूप देता है। यह आपको फोकस खोने का कारण बनता है।

फ़ंक्शन के अंदर जो भी है उसे सीधे प्रस्तुत करने का प्रयास करें।

 <main id="main" role="main"> 
      <div className="container-fluid"> 
       <FormPostSingle /> 
      </div> 
     </main> 

====>

 <main id="main" role="main"> 
      <div className="container-fluid"> 
       <form onSubmit={onSubmit}> 
        <InputText name="title" label="Title" placeholder="Enter a title" onChange={onChange} value={valueTitle} /> 
        <InputSubmit name="Save" /> 
       </form> 
      </div> 
     </main> 
संबंधित मुद्दे