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

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*लेकिन मैं सिर्फ यह काम करने की कोशिश कर रहा हूं।)

Comments

thisजब आप पाठ फ़ील्ड इनपुट करते हैं तो लॉगिंग का प्रयास करें । यह हो सकता है कि thisनहीं है Searcherघटक अब और।

— फॉरेहू

धन्यवाद FaureHu - thisकोड में किस बिंदु पर लॉगिंग है ? से लॉग इन करने Searcher.handleUserInput()या SearchFacet.handleChange()कुछ करने की कोशिश नहीं कर रहा है।

— फिल ज्यॉर्फ

आप इसी तरह के सवालों के लिए मेरा जवाब देख सकते हैं। आप विस्तृत विवरण पा सकते हैं: stackoverflow.com/questions/34713718/…

— prudhvi seeramreddi

Answer 1

आपने अपने onchangeप्रोप को ठीक से कैस नहीं किया है input। इसे onChangeJSX में होना चाहिए ।

<input
  type="text"
  value={this.props.searchString}
  ref="searchStringInput"
  onchange={this.handleChange} <--[should be onChange]
/>  

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

वे ऐसे इनपुट को नियंत्रित घटकों के रूप में संदर्भित करते हैं, और उन इनपुटों को संदर्भित करते हैं जो इसके बजाय डोम को मूल रूप से इनपुट के मूल्य और बाद में उपयोगकर्ता से अनियंत्रित घटकों के रूप में परिवर्तन को संभालने देते हैं ।

जब भी आप किसी वेरिएबल valueका प्रोप सेट करते हैं input, तो आपके पास एक कंट्रोल्ड कंपोनेंट होता है । इसका मतलब है कि आपको कुछ प्रोग्रामेटिक साधनों द्वारा चर के मूल्य को बदलना होगा अन्यथा इनपुट हमेशा उस मूल्य को रखेगा और कभी भी नहीं बदलेगा, तब भी जब आप टाइप करते हैं - इनपुट का मूल व्यवहार, टाइपिंग पर इसके मूल्य को अपडेट करने के लिए, ओवरराइड किया जाता है। यहाँ प्रतिक्रिया द्वारा।

तो, आप राज्य से उस चर को सही ढंग से ले रहे हैं, और राज्य को अद्यतन करने के लिए एक हैंडलर ठीक है। समस्या यह थी क्योंकि आपके पास है onchangeऔर सही नहीं है onChangeहैंडलर को कभी नहीं बुलाया valueगया था और इसलिए जब आप इनपुट में टाइप करते हैं तो कभी भी अपडेट नहीं किया जा रहा था। जब आप onChangeहैंडलर का उपयोग करते हैं तो उसे कॉल किया जाता है, जब आप टाइप करते हैं तो अपडेट किया जाता value है , और आप अपने परिवर्तनों को देखते हैं।

Answer 2

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

Https://facebook.github.io/react/docs/uncontrolled-compenders.html#default-values देखें

साथ ही, @davnicwil को इंगित onchangeकरना चाहिए onChange।

Comments

मेरी आवश्यकता में मैं टाइपिंग क्षेत्र के साथ इनपुट क्षेत्र को सक्षम करना चाहता था और साथ ही इसे राज्य चर से डिफ़ॉल्ट मान पर सेट करने की आवश्यकता थी। defaultValue विशेषता ठीक थी, लेकिन राज्य परिवर्तनों के अनुसार डिफ़ॉल्ट मान को अपडेट करने में समस्या है, क्या डिफ़ॉल्ट मूल्य को बदलने के लिए मजबूर करने का कोई तरीका है?

— सेमिरा

आपको स्टैकओवरफ़्लो पर एक और प्रश्न के रूप में उस मुद्दे को पोस्ट करना चाहिए।

— इवान

@GeoffreyHale मुझे पूरा यकीन नहीं है कि आप क्या मतलब है कि यह कैसे भ्रामक है। इस उदाहरण को देखें जो राज्य का उपयोग नहीं करता है: codepen.io/anon/pen/BQJZwr?editors=0010 । या यह एक जो करता है: codepen.io/anon/pen/JbMJMX?editors=0010

— Ivan

@ इवान तुम सही हो, दोनों अपरिवर्तनीय हैं: value={whatever}और value={this.state.myvalue}। मुझे इसके बजाय यह स्पष्टीकरण देना चाहिए था : उपयोग करने onChange={this.handleChange}और कुछ भी करने handleChange: function(e) { var newState = {}; newState[e.target.name] = e.target.value; this.setState(newState); },से फ़ील्ड फिर से परिवर्तनशील हो जाता है।

— ज्योफ्री हेल

@ इवान यह एक बस मेरी मदद की आपने मुझे इतना defaultValueदिन बचाने के लिए धन्यवाद दिया ।

— कोड कुकर

Answer 3

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

उदाहरण:

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

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

onChange फ़ंक्शन में उल्लेखित मूल्य फ़ील्ड को अपडेट करें।

Comments

धन्यवाद, बहुत मददगार। केवल आपका उत्तर पूरी तरह से बताता है कि समस्या को कैसे हल किया जाए।

— M3RS

इस परिवर्तन को कैसे परिभाषित करें?

— जितेंद्र पंचोली

यदि यह एक स्टेटलेस घटक है, तो फ़ंक्शन के अंदर, और यदि यह एक क्लास घटक है, तो कंस्ट्रक्टर के अंदर।

— गैल ग्रुनफेल्ड

आपको यह लिखने की ज़रूरत नहीं है। सेटस्टेट के अंदर इसे लिखें। यदि आप केवल textValue लिखते हैं: event.target.value अंदर setState, यह भी पूरी तरह से काम करता है

— Pardeep Sharma

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। इस मुद्दे को देखें

Answer 5

मेरे लिए निम्नलिखित सरल परिवर्तन पूरी तरह से काम करते हैं

<input type="text" 
        value={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* does not work */}

परिवर्तन ... मान = {myPropVal} से ... defaultValue = {myPropVal}

<input type="text" 
        defaultValue={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* Works!! */}

Comments

यह मेरे लिए तय किया। धन्यवाद!

— मायिक

मुझे लगता है कि जब फॉर्मिक के भीतर इस्तेमाल किया जाता है तो ऑनकॉन्ग ठीक से काम नहीं करता है। मैं यह भी कोशिश कर रहा था, लेकिन यह मेरे लिए काम नहीं किया। क्या आप कृपया यहाँ देख सकते हैं? stackoverflow.com/questions/61689720/…

— a125

Answer 6

एक वर्ग घटक संदर्भ में ...

यदि परिवर्तनहैंडलर विधि एक सामान्य कार्य है:

handleChange(e){
    this.setState({[e.target.name]:[e.target.value]});
}

यह इस तरह के रूप में इस्तेमाल किया जा सकता है ...onChange={(e)=>this.handleChange(e)}

<input type="text" name="any" value={this.state.any} onChange={(e)=>this.handleChange(e)}></input>

यदि परिवर्तनहैंडलर विधि एक तीर फ़ंक्शन है:

handle = (e) =>{
        this.setState({[e.target.name]:[e.target.value]});
    }

यह इस तरह से इस्तेमाल किया जा सकता है ... onChange={this.handle}

 <input type="text" name="any2" value={this.state.any2} onChange={this.handle} ></input>

और यह मेरी "प्रतिक्रिया इनपुट पाठ क्षेत्र में टाइप नहीं कर सकता" समस्या हल हो गई।