प्रतिक्रिया इनपुट टेक्स्ट फ़ील्ड में टाइप नहीं कर सकते

Question

मैं React.js का अपना पहला बिट आजमा रहा हूं और जल्दी से स्टंप हो गया हूं ... मेरे पास नीचे कोड है, जो <div id="search"></div> में एक खोज फ़ॉर्म प्रस्तुत करता है। लेकिन खोज बॉक्स में टाइपिंग कुछ भी नहीं करता है।

संभावित रूप से प्रोप और राज्य ऊपर और नीचे गुम होने में कुछ गुम हो रहा है, और यह एक आम समस्या की तरह लगता है। लेकिन मैं फंस गया हूँ - मैं नहीं देख सकता कि क्या गुम है।

var SearchFacet = React.createClass({ 
    handleChange: function() { 
    this.props.onUserInput(
     this.refs.searchStringInput.value 
    ) 
    }, 
    render: function() { 
    return (
     <div> 
     Search for: 
     <input 
      type="text" 
      value={this.props.searchString} 
      ref="searchStringInput" 
      onchange={this.handleChange} /> 
     </div> 
    ); 
    } 
}); 

var SearchTool = React.createClass({ 
    render: function() { 
    return (
     <form> 
     <SearchFacet 
      searchString={this.props.searchString} 
      onUserInput={this.props.onUserInput} 
     /> 
     <button>Search</button> 
     </form> 
    ); 
    } 
}); 

var Searcher = React.createClass({ 
    getInitialState: function() { 
    return { 
     searchString: '' 
    } 
    }, 

    handleUserInput: function(searchString) { 
    this.setState({ 
     searchString: searchString 
    }) 
    }, 

    render: function() { 
    return (
     <div> 
     <SearchTool 
      searchString={this.state.searchString} 
      onUserInput={this.handleUserInput} 
     /> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <Searcher />, 
    document.getElementById('searcher') 
); 

(अंततः मैं SearchFacet* के अन्य प्रकार होगा, लेकिन मैं सिर्फ इस एक काम कर पाने के कोशिश कर रहा हूँ।)

Answer 1

में

render: function() { 
    return (
    <div> 
     Search for: 
     <input 
     type="text" 
     value={this.props.searchString} 
     ref="searchStringInput" 
     onchange={this.handleChange} /> 
    </div> 
); 
} 

आप ठीक से अपने onchange संपत्ति मामलों नहीं किया है। इसे onChange होना चाहिए - इसे आज़माएं और देखें कि क्या यह अब हैंडलर को कॉल करता है या नहीं।

अद्यतन, इस सवाल के बाद से विचारों का एक बहुत है और अतिरिक्त संदर्भ का एक सा प्रदान मूल्यवान है:

एक <input> करने के लिए एक value प्रोप पास करने का विषय है, और फिर किसी भी तरह से पारित कर दिया, मान परिवर्तित onChange हैंडलर का उपयोग कर उपयोगकर्ता इंटरैक्शन के जवाब में the official docs में बहुत अच्छी तरह से विचार किया जाता है।

वे Controlled Components जैसे इनपुट को संदर्भित करते हैं, और इनपुट को संदर्भित करते हैं कि इसके बजाय डीओएम इनपुट इनपुट के मूल्य को संभालता है और उपयोगकर्ता के बाद के परिवर्तन Uncontrolled Components के रूप में बदलता है।

Answer 2

value={whatever} का उपयोग करते हुए यह तो आप इनपुट क्षेत्र में टाइप नहीं कर सकते हैं कर देगा। आपको defaultValue="Hello!" का उपयोग करना चाहिए।

https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

देखें के रूप में @davnicwil बताते हैं इसके अलावा, onchangeonChange होना चाहिए।

Answer 3

यह हो सकता है कि ऑन चेंज फ़ंक्शन इनपुट में उल्लिखित उचित मान को अद्यतन नहीं कर रहा है।

उदाहरण:

<input type="text" value={this.state.textValue} onChange = {this.changeText}></input> 

changeText(event){ 
     this.setState(
      {this.state.textValue : event.target.value} 
     ); 
    } 

onChange समारोह में

उल्लेख मान फ़ील्ड अद्यतन करें।

Answer 4

मुझे भी एक ही समस्या है और मेरे मामले में मैंने ठीक से reducer इंजेक्शन दिया लेकिन फिर भी मैं क्षेत्र में टाइप नहीं कर सका। यह पता चला है कि आप immutable का उपयोग कर रहे हैं तो आपको redux-form/immutable का उपयोग करना होगा।

import {reducer as formReducer} from 'redux-form/immutable'; 
const reducer = combineReducers{ 

    form: formReducer 
} 
import {Field, reduxForm} from 'redux-form/immutable'; 
/* your component */ 

सूचना है कि अपने राज्य state->form की तरह होना चाहिए अन्यथा आप स्पष्ट रूप से पुस्तकालय विन्यास के लिए भी राज्य के लिए नाम form होना चाहिए। यह issue