প্রতিক্রিয়া ইনপুট পাঠ্য ক্ষেত্রে টাইপ করা যায় না

Question

আমি আমার রিট্যাক্ট.জেএস-এর প্রথম বিট চেষ্টা করছি এবং তাড়াতাড়ি স্টাম্পড করছি ... আমার নীচের কোডটি রয়েছে যা একটি অনুসন্ধান ফর্মকে রেন্ডার করে <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

আপনি সঠিকভাবে আপনার cased নি onchangeমধ্যে ঠেকনা input। এটি onChangeজেএসএক্সে থাকা দরকার।

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

কোনও valueপ্রোপ পাস করার বিষয় <input>এবং তারপরে কোনও onChangeহ্যান্ডলার ব্যবহারকারীর ইন্টারঅ্যাকশনর প্রতিক্রিয়া হিসাবে উত্তীর্ণ হওয়া মানটি পরিবর্তন করে ডক্সে বেশ প্রশংসিত ।

তারা নিয়ন্ত্রিত উপাদানগুলির মতো ইনপুটগুলিকে উল্লেখ করে এবং ইনপুটগুলি উল্লেখ করে যে পরিবর্তে DOM স্থানীয়ভাবে ইনপুটটির মান এবং অনিয়ন্ত্রিত উপাদান হিসাবে ব্যবহারকারী থেকে পরবর্তী পরিবর্তনগুলি পরিচালনা করতে দেয় ।

যখনই আপনি কোনও ভেরিয়েবলের জন্য valueপ্রপ সেট করেন input, আপনার একটি নিয়ন্ত্রিত উপাদান থাকে । এর অর্থ আপনার অবশ্যই কিছু প্রোগ্রামেটিক পদ্ধতিতে ভেরিয়েবলের মান পরিবর্তন করতে হবে অন্যথায় ইনপুটটি সর্বদা সেই মানটি ধরে রাখে এবং কখনই পরিবর্তন হবে না, এমনকি টাইপ করার সময়ও ইনপুটটির নেটিভ আচরণ, টাইপের ক্ষেত্রে এর মান আপডেট করার জন্য ওভাররাইড করা হয় এখানে প্রতিক্রিয়া।

সুতরাং, আপনি সঠিকভাবে সেই পরিবর্তনশীল রাষ্ট্র থেকে নিচ্ছেন, এবং রাষ্ট্রটিকে সমস্ত সেট আপ করার জন্য আপডেট করার জন্য একটি হ্যান্ডলার রয়েছে। সমস্যাটি কারণ হ'ল হ্যান্ডলারটি কখনও কল করা হয়নি onchangeএবং সঠিকভাবে নয় কারণ আপনি যখন ইনপুটটি টাইপ onChangeকরেন valueতখন কখনই আপডেট হয় না। যখন আপনি ব্যবহার করেন onChangeহ্যান্ডলার হয় বলা হয়, value হয় যখন আপনি টাইপ আপডেট, এবং আপনি আপনার পরিবর্তন দেখতে।

Answer 2

ব্যবহারটি value={whatever}এটি তৈরি করবে যাতে আপনি ইনপুট ক্ষেত্রে টাইপ করতে পারবেন না। আপনার ব্যবহার করা উচিত defaultValue="Hello!"।

Https://facebook.github.io/react/docs/uncontrolled-components.html#default-values দেখুন

এছাড়াও, ডাবনিকুইল পয়েন্ট হিসাবে উল্লেখ করা onchangeউচিত onChange।

Comments

আমার প্রয়োজনে আমি টাইপিংয়ের সাথে ইনপুট ফিল্ডটি সক্ষম করতে চাইছিলাম পাশাপাশি এটির জন্য ডিফল্ট মান সেট করা দরকার একটি রাষ্ট্র ভেরিয়েবল থেকে আসে। ডিফল্টভ্যালু বৈশিষ্ট্যটি ঠিক ছিল তবে রাষ্ট্র পরিবর্তন অনুসারে ডিফল্ট মান আপডেট করার ক্ষেত্রে সমস্যা আছে, ডিফল্ট মান পরিবর্তন করতে বাধ্য করার কোনও উপায় আছে কি?

— সেমিরা

আপনার এই সমস্যাটি স্ট্যাকওভারফ্লোতে অন্য প্রশ্ন হিসাবে পোস্ট করা উচিত।

— ইভান

@ জিফ্রেহ্যালে আমি কীভাবে বিভ্রান্তিকর তা বোঝাতে চাইছি তা আমি নিশ্চিত নই। এই উদাহরণটি দেখুন যা রাষ্ট্রটি ব্যবহার করে না: codepen.io/anon/pen/BQJZwr?editors=0010 । বা এটি যা করে: codepen.io/anon/pen/JbMJMX?editors=0010

— ইভান

@ ইভান আপনি ঠিক বলেছেন, উভয়ই পরিবর্তনযোগ্য: 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

ধন্যবাদ, খুব সহায়ক। সমস্যাটি কীভাবে সমাধান করা যায় তা কেবলমাত্র আপনার উত্তর পুরোপুরি ব্যাখ্যা করে।

— এম

এই পরিবর্তনটি কোথায় সংজ্ঞা দেবেন?

— জিতেন্দ্র পাঁচোলি

যদি এটি কোনও স্টেটলেস উপাদান, ফাংশনের অভ্যন্তরে এবং যদি এটি কোনও শ্রেণি উপাদান হয় তবে কনস্ট্রাক্টরের অভ্যন্তরে।

— গাল গ্রানফিল্ড

আপনার সেটস্টেটের ভিতরে এই স্টেট লেখার দরকার নেই। আপনি যদি কেবল পাঠ্যমূল্য: ইভেন্টস্টেট.মূল্য সেটস্টেটের অভ্যন্তরে লিখেন তবে এটিও পুরোপুরি কাজ করে

— পারদীপ শর্মা

Answer 4

আমারও একই সমস্যা আছে এবং আমার ক্ষেত্রে আমি হ্রাসকারককে সঠিকভাবে ইনজেকশন দিয়েছি তবে তবুও আমি ফিল্ডে টাইপ করতে পারিনি। আপনি যদি ব্যবহার 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} থেকে ... ডিফল্টভ্যালু = {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>

এবং এটি আমার "প্রতিক্রিয়া ইনপুট পাঠ্য ক্ষেত্রে টাইপ করতে পারে না" সমস্যার সমাধান করেছে।