রিঅ্যাক্টজেএস ব্যবহার করে কীভাবে কোনও ইনপুট ক্ষেত্রের মান পাবেন?

188

আমার নিম্নলিখিত প্রতিক্রিয়া উপাদান রয়েছে:

export default class MyComponent extends React.Component {

    onSubmit(e) {
        e.preventDefault();
        var title = this.title;
        console.log(title);
    }

    render(){
        return (
            ...
            <form className="form-horizontal">
                ...
                <input type="text" className="form-control" ref={(c) => this.title = c} name="title" />
                ...
            </form>
            ...
            <button type="button" onClick={this.onSubmit} className="btn">Save</button>
            ...
        );
    }

};

কনসোলটি আমাকে দিচ্ছে undefined- এই কোডটির সাথে কোন ধারণা কী?

javascript  reactjs 
— JoeTidee
সূত্র
7
this.onSubmit.bind(this);
— জারক্মস
ভাল - এটি উত্তর হিসাবে যুক্ত করতে চাই এবং আমি এটি টিক (())
— জোটিডি
2
e.target.valueবাঁধন ছাড়া কি ?
— omarjmh
1
e.target.value বোতামটি লক্ষ্যবস্তু করা হবে না, ইনপুট ক্ষেত্রটি নয়?
— জোটিডি
onSubmitক্লিক করার সময় আপনার পদ্ধতিটি সাবমিট বাটনে (ডিওএম উপাদান) বাঁধতে হবে (যেমন onClick={this.onSubmit.bind(this)})) এবং আপনি যদি যে ফর্মটি ব্যবহার করতে পারেন তে শিরোনাম ইনপুটটির মানটি অ্যাক্সেস করতে চান onSubmit(event) { const title = event.target.elements.title.value; }।
— tfmontague

উত্তর:

10

আপনার ক্লাস মাই কম্পোম্পোন্টের অধীনে রিঅ্যাক্ট.কম্পোনেন্ট বর্ধমান কনস্ট্রাক্টর ব্যবহার করা উচিত

constructor(props){
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

তারপরে আপনি শিরোনামের ফলাফল পাবেন

— মোঃ মাইদুল ইসলাম
সূত্র
313

আপনি (বাধ্যতামূলক) কাজ (আইএনএস) এর ভার্সন এবং আপনি হুক ব্যবহার করতে চান কিনা তার সংস্করণের উপর নির্ভর করে এখানে তিনটি উত্তর রয়েছে।

আগেরটা আগে:

এটা তোলে বুঝতে কাজ প্রতিক্রিয়া গুরুত্বপূর্ণ, তাই আপনি যে জিনিসগুলিতে সঠিকভাবে (protip কি করতে পারেন: এটা হয় সুপার চলমান মূল্য মাধ্যমে টিউটোরিয়াল ব্যায়াম প্রতিক্রিয়া প্রতিক্রিয়া উপর ওয়েবসাইটের ভাল লেখা, এবং একটি উপায় যে আসলে ব্যাখ্যা কাজ করার জন্য কভার সব মূলসূত্র। কিছু)। "যথাযথভাবে" এর অর্থ হ'ল আপনি একটি অ্যাপ্লিকেশন ইন্টারফেস লিখছেন যা কোনও ব্রাউজারে রেন্ডার হওয়ার মতো হয়; সমস্ত ইন্টারফেসের কাজ প্রতিক্রিয়াতে ঘটে, "আপনি যদি ওয়েব পৃষ্ঠা লিখছেন তবে আপনি কী ব্যবহার করছেন" তে নয় (এই কারণেই অ্যাপ্লিকেশনগুলি "অ্যাপ্লিকেশনগুলি হয়," ওয়েব পৃষ্ঠাগুলি "নয়)।

প্রতিক্রিয়া অ্যাপ্লিকেশন দুটি জিনিস ভিত্তিতে রেন্ডার করা হয়:

  1. যে কোনও পিতা-মাতার দ্বারা ঘোষিত উপাদানগুলির বৈশিষ্ট্যগুলি সেই উপাদানটির একটি উদাহরণ তৈরি করে, যা পিতামাতার তার জীবনকাল জুড়ে পরিবর্তন করতে পারে, এবং
  2. উপাদানটির নিজস্ব অভ্যন্তরীণ অবস্থা, যা এটি নিজের জীবনকালক্রমে নিজেকে পরিবর্তন করতে পারে।

আপনি প্রতিক্রিয়াটি ব্যবহার করার সময় আপনি যা স্পষ্টভাবে করছেন না তা হ'ল এইচটিএমএল উপাদান তৈরি করে এবং সেগুলি ব্যবহার করে: যখন আপনি কোনও প্রতিক্রিয়া ব্যবহার করতে বলুন <input>, উদাহরণস্বরূপ, আপনি কোনও এইচটিএমএল ইনপুট উপাদান তৈরি করছেন না , আপনি প্রতিক্রিয়াটিকে ইনপুট অবজেক্ট তৈরি করতে বলছেন এটি HTML ইনপুট উপাদান হিসাবে রেন্ডার হিসাবে ঘটে থাকে এবং যার ইভেন্টের হ্যান্ডলিংটি এইচটিএমএল উপাদানটির ইনপুট ইভেন্টগুলিতে দেখায় কিন্তু নিয়ন্ত্রণ করা হয় না ।

যখন ব্যবহার প্রতিক্রিয়া কি করছেন অ্যাপ্লিকেশন UI উপাদান আছে যা যা ব্যবহারকারীর কোনো ভূমিকা কম্পোনেন্ট রাষ্ট্রীয় পরিবর্তন, সঙ্গে (প্রায়ই manipulable) ডেটা ব্যবহারকারীর উপস্থাপন উৎপাদিত হয় পারে নতুন রাষ্ট্র প্রতিফলিত আপনার আবেদন ইন্টারফেস অংশ একটি rerender হতে পারে। এই মডেলটিতে, রাজ্য সর্বদা চূড়ান্ত কর্তৃত্ব হয়, "ইউআই লাইব্রেরিটি এটি রেন্ডার করতে ব্যবহৃত হয় না" যা ওয়েবে ব্রাউজারের ডিওএম হয়। এই প্রোগ্রামিং মডেলটিতে ডিওএম প্রায় একটি চিন্তাভাবনা: এটি কেবলমাত্র নির্দিষ্ট UI কাঠামো যা প্রতিক্রিয়া ব্যবহার করে।

সুতরাং একটি ইনপুট উপাদান ক্ষেত্রে, যুক্তিটি হ'ল:

  1. আপনি ইনপুট উপাদান টাইপ করুন,
  2. আপনার ইনপুট উপাদানটিতে এখনও কিছুই ঘটেনি, ইভেন্টটি প্রতিক্রিয়া দ্বারা বাধা পেয়েছিল এবং ততক্ষনে মারা যায় ,
  3. ইভেন্ট হ্যান্ডলিংয়ের জন্য আপনি যে ফাংশনটি সেট করেছেন তাতে ইভেন্টটিকে ফরোয়ার্ড করুন,
  4. এই ফাংশন একটি রাষ্ট্র আপডেটের সময় নির্ধারণ করতে পারে ,
  5. যদি এটি হয়, প্রতিক্রিয়া সেই রাষ্ট্র আপডেটটি চালায় (অবিচ্ছিন্নভাবে!) এবং renderআপডেটের পরে একটি কল ট্রিগার করবে , তবে কেবলমাত্র রাষ্ট্রীয় আপডেট রাষ্ট্র পরিবর্তন করে।
  6. শুধুমাত্র পরে এই রেন্ডার হয়ে গেছে UI 'তে প্রদর্শনী যে আপনি "একটি চিঠি টাইপ করা" হবে।

এটি মিলি সেকেন্ডের ক্ষেত্রে ঘটে থাকে, যদি কম না হয়, তবে দেখে মনে হচ্ছে আপনি "পৃষ্ঠায় কেবলমাত্র একটি ইনপুট উপাদান ব্যবহার করে" ব্যবহার করে একইভাবে ইনপুট উপাদানটি টাইপ করেছেন, তবে এটি একেবারেই নয় ঘটেছিলো.

সুতরাং, এর সাথে, প্রতিক্রিয়ার উপাদানগুলির থেকে কীভাবে মূল্যবোধ পাওয়া যায় সে সম্পর্কে:

ES5 সহ 15 এবং নীচে প্রতিক্রিয়া জানান

জিনিসগুলি সঠিকভাবে করতে, আপনার উপাদানটির একটি রাষ্ট্রীয় মান রয়েছে যা একটি ইনপুট ক্ষেত্রের মাধ্যমে দেখানো হয় এবং আমরা ইউআই উপাদানটি পরিবর্তন ইভেন্টগুলিকে পুনরায় উপাদানটিতে প্রেরণ করে এটি আপডেট করতে পারি:

var Component = React.createClass({
  getInitialState: function() {
    return {
      inputValue: ''
    };
  },

  render: function() {
    return (
      //...
      <input value={this.state.inputValue} onChange={this.updateInputValue}/>
      //...
    );
  },

  updateInputValue: function(evt) {
    this.setState({
      inputValue: evt.target.value
    });
  }
});

সুতরাং আমরা ব্যবহার করতে প্রতিক্রিয়া বলুন updateInputValueযা ব্যবহারকারীর কোনো ভূমিকা হ্যান্ডেল করতে ফাংশন, ব্যবহার setStateরাষ্ট্র আপডেট করে এবং সত্য নির্দিষ্ট সময় নির্ধারণের জন্য যে renderমধ্যে কল this.state.inputValueমানে হল যখন এটা রাষ্ট্র আপডেট করার পরে rerenders, ব্যবহারকারী তারা যা টাইপ করা উপর ভিত্তি করে আপডেট টেক্সট দেখতে হবে।

মন্তব্যের ভিত্তিতে সংযোজন

প্রদত্ত যে ইউআই ইনপুটগুলি রাষ্ট্রীয় মানগুলিকে উপস্থাপন করে (বিবেচনা করুন কোনও ব্যবহারকারী যদি মাঝের দিকে তাদের ট্যাবটি বন্ধ করে দেয় এবং ট্যাবটি পুনরুদ্ধার করা হয় তবে কী ঘটেছিল তা বিবেচনা করুন they তাদের পূরণ করা সমস্ত মানগুলি কি পুনরুদ্ধার করা উচিত? যদি তাই হয় তবে তা রাষ্ট্র)। এটি আপনাকে বড় আকারের দশ বা এমনকি একশো ইনপুট ফর্মের মতো মনে হতে পারে তবে প্রতিক্রিয়াটি আপনার ইউআইকে একটি রক্ষণাবেক্ষণযোগ্য উপায়ে মডেলিং করা সম্পর্কে: আপনার 100 টি স্বাধীন ইনপুট ক্ষেত্র নেই, আপনার সাথে সম্পর্কিত ইনপুটগুলির গ্রুপ রয়েছে, তাই আপনি প্রতিটি ক্যাপচার করেন কোনও উপাদানগুলিতে গ্রুপ করুন এবং তারপরে গ্রুপগুলির সংগ্রহ হিসাবে আপনার "মাস্টার" ফর্মটি তৈরি করুন।

MyForm:
  render:
    <PersonalData/>
    <AppPreferences/>
    <ThirdParty/>
     ...

এটি দৈত্য একক ফর্ম উপাদানগুলির চেয়ে বজায় রাখা আরও সহজ। রাজ্য রক্ষণাবেক্ষণ সহ উপাদানগুলিতে গোষ্ঠীগুলিকে বিভক্ত করুন, যেখানে প্রতিটি উপাদান একবারে কয়েকটি ইনপুট ক্ষেত্র ট্র্যাক করার জন্য দায়ী।

আপনার মনে হতে পারে যে এই সমস্ত কোডটি লিখতে "ঝামেলা" হয়েছে তবে এটি একটি মিথ্যা সাশ্রয়: বিকাশকারীরা যারা আপনি নন, ভবিষ্যতে আপনিও এই সমস্ত ইনপুটগুলি সুস্পষ্টভাবে আঁকড়ে দেখলে উপকার পাবেন, কারণ এটি কোড পাথগুলি সনাক্ত করতে অনেক সহজ করে তোলে। তবে আপনি সর্বদা অনুকূলিত করতে পারেন। উদাহরণস্বরূপ, আপনি একটি রাষ্ট্র লিঙ্কার লিখতে পারেন

MyComponent = React.createClass({
  getInitialState() {
    return {
      firstName: this.props.firstName || "",
      lastName: this.props.lastName || "" 
      ...: ...
      ...
    }
  },
  componentWillMount() {
    Object.keys(this.state).forEach(n => {
      let fn = n + 'Changed';
      this[fn] = evt => {
        let update = {};
        update[n] = evt.target.value;
        this.setState(update);
      });
    });
  },
  render: function() {
    return Object.keys(this.state).map(n => {
      <input
        key={n} 
        type="text"
        value={this.state[n]}
        onChange={this[n + 'Changed']}/>
    });
  }
});

অবশ্যই, এর উন্নত সংস্করণ রয়েছে, তাই https://npmjs.com হিট করুন এবং আপনার পছন্দ মতো একটি প্রতিক্রিয়া স্থিতির সংযোগ সমাধান অনুসন্ধান করুন। ওপেন সোর্সটি বেশিরভাগই অন্যেরা ইতিমধ্যে কী করেছে তা সন্ধান করার জন্য এবং নিজেকে স্ক্র্যাচ থেকে সবকিছু লেখার পরিবর্তে এটি ব্যবহার করে।

প্রতিক্রিয়া 16 (এবং 15.5 ট্রানজিশনাল) এবং 'আধুনিক' জেএস

প্রতিক্রিয়া হিসাবে 16 (এবং 15.5 দিয়ে নরম শুরু) createClassকলটি আর সমর্থিত নয় এবং শ্রেণি সিনট্যাক্স ব্যবহার করা দরকার। এটি দুটি জিনিস পরিবর্তিত করে: সুস্পষ্ট শ্রেণীর বাক্য গঠন, তবে thisপ্রাসঙ্গিক বাঁধাই যা createClass"ফ্রি" করতে পারে, তাই জিনিসগুলি এখনও কাজ করে তা নিশ্চিত করার জন্য thisআপনি onWhateverহ্যান্ডলারের বেনাম ফাংশন সংরক্ষণের প্রসঙ্গে "ফ্যাট অ্যার" স্বরলিপি ব্যবহার করছেন তা নিশ্চিত করুন as onChangeকোড এখানে আমরা ব্যবহার:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  render() {
    return (
      //...
      <input value={this.state.inputValue} onChange={evt => this.updateInputValue(evt)}/>
      //...
    );
  },

  updateInputValue(evt) {
    this.setState({
      inputValue: evt.target.value
    });
  }
});

আপনি দেখতে পেয়েছেন লোকেরা bindতাদের সমস্ত ইভেন্ট হ্যান্ডলিং ফাংশনগুলির জন্য তাদের নির্মাতাকে ব্যবহার করে:

constructor(props) {
  super(props);
  this.handler = this.handler.bind(this);
  ...
}

render() {
  return (
    ...
    <element onclick={this.handler}/>
    ...
  );
}

এটা করবেন না।

আপনি যে কোনও সময় ব্যবহার bindকরছেন না কেন, "আপনি এটি ভুল করছেন" প্রবাদটি প্রযোজ্য। আপনার শ্রেণি ইতিমধ্যে বস্তু প্রোটোটাইপ সংজ্ঞায়িত করে, এবং ইতিমধ্যে উদাহরণ প্রসঙ্গটি সংজ্ঞায়িত করে। bindএর উপরে কিছু রাখবেন না ; কনস্ট্রাক্টরে আপনার সমস্ত ফাংশন কলগুলি নকল করার পরিবর্তে সাধারণ ইভেন্ট ফরোয়ার্ডিং ব্যবহার করুন, কারণ সেই সদৃশটি আপনার বাগের পৃষ্ঠকে বাড়িয়ে তোলে এবং ত্রুটিগুলি সনাক্ত করা আরও বেশি শক্ত করে তোলে কারণ আপনি যেখানে আপনার কোডটি কল করেছেন তার পরিবর্তে সমস্যাটি আপনার কনস্ট্রাক্টরে থাকতে পারে। পাশাপাশি অন্যদের উপর রক্ষণাবেক্ষণের বোঝা চাপিয়ে দেওয়া যা আপনার সাথে কাজ করতে (রয়েছে বা চয়ন করুন)।

হ্যাঁ, আমি জানি প্রতিক্রিয়া ডক্স বলছে এটি ঠিক আছে। এটা না, এটা করবেন না।

হুক সহ ফাংশন উপাদান ব্যবহার করে 16.8 প্রতিক্রিয়া জানান

১ 16.৮ এর প্রতিক্রিয়া অনুসারে ফাংশন উপাদানটি (যেমন আক্ষরিক অর্থে কেবল একটি ফাংশন যা কিছুকে propsযুক্তি হিসাবে গ্রহণ করে তা ব্যবহার করা যেতে পারে যেমন এটি কোনও উপাদান বর্গের উদাহরণ, কোনও শ্রেণি না লিখেই) হুক ব্যবহারের মাধ্যমেও রাষ্ট্র দেওয়া যেতে পারে ।

আপনার যদি পূর্ণ শ্রেণীর কোডের প্রয়োজন না হয় এবং একটি একক উদাহরণের ফাংশনটি করে, তবে আপনি এখন useStateনিজেকে একটি একক রাষ্ট্রের পরিবর্তনশীল পেতে এবং তার আপডেট ফাংশনটি ব্যবহার করতে পারেন , যা উপরের উদাহরণগুলির মতো মোটামুটি একইভাবে কাজ করে, ব্যতীত except setStateফাংশন কল:

import { useState } from 'react';

function myFunctionalComponentFunction() {
  const [input, setInput] = useState(''); // '' is the initial state value
  return (
    <div>
    <label>Please specify:</label>
    <input value={input} onInput={e => setInput(e.target.value)}/>
    </div>
  );
}

পূর্বে শ্রেণি এবং ফাংশন উপাদানগুলির মধ্যে অনানুষ্ঠানিক পার্থক্য ছিল "ফাংশন উপাদানগুলির স্টেট থাকে না", সুতরাং আমরা আর এটির পিছনে আড়াল করতে পারি না: ফাংশন উপাদান এবং শ্রেণীর উপাদানগুলির মধ্যে পার্থক্য খুব ভালভাবে বিভিন্ন পৃষ্ঠায় ছড়িয়ে পাওয়া যায় লিখিত প্রতিক্রিয়া ডকুমেন্টেশন (আপনার জন্য সুবিধার্থে ভুল ব্যাখ্যা করার জন্য কোনও শর্টকাট ওয়ান লাইনের ব্যাখ্যা নয়!) যা আপনার পড়া উচিত যাতে আপনি কী করছেন তা জানতে পারেন এবং যাতে আপনি নিজের প্রোগ্রামের সমাধানের জন্য সেরাটি বেছে নিয়েছিলেন (যা তার জন্যই হোক না কেন) সমাধান করতে পারেন know আপনার যে সমস্যা রয়েছে তার বাইরে

— মাইক 'পোম্যাক্স' কামারম্যানস
সূত্র
4
আমি কয়েকটি অনলাইন নিবন্ধ পড়েছি যা বলে যে খুব বেশি রাজ্য ব্যবহার করা একটি খারাপ ধারণা is আমার আবেদনের একটি বিশেষ ফর্মটিতে আমার প্রায় 100 ফর্ম ক্ষেত্র রয়েছে। রাজ্যকে বাঁচাতে কোনও ক্রিয়াকলাপ সংজ্ঞায়িত করা জিনিসগুলি করার অপ্রয়োজনীয় কঠিন উপায়ে মনে হয়। যদি আমি অন ক্লিক করুন = {this.onSubmit.bind (এটি)}, এটি মান পাওয়ার ভাল উপায় বলে মনে হয় (তবে আমি চাইলে উপাদানগুলির স্থিতি নির্ধারণ করি) - আমি এ সম্পর্কে কিছু মন্তব্যকে প্রশংসা করব।
— জোতিদি
5
সুতরাং স্মার্ট কোড লিখুন। ফর্ম ইনপুটগুলি অবশ্যই স্পষ্টভাবে রাষ্ট্রীয় (বিবেচনা করুন কোনও ব্যবহারকারী যদি তাদের ট্যাব মাঝের দিকে বন্ধ করে দেয় এবং ট্যাবটি পুনরুদ্ধার করা হয় তবে কী ঘটেছিল those সেগুলি পূরণ করা সমস্ত মানগুলি কি পুনরুদ্ধার করা উচিত? হ্যাঁ? এটি রাষ্ট্র ), তাই কিছুটা রাজ্য রক্ষণাবেক্ষণ কোড লিখুন। ফেসবুকের শত শত ফর্ম মান রয়েছে এবং তাদের উন্মাদনার সমাধান ছিল প্রতিক্রিয়া। এটি সত্যিই ভাল কাজ করে । আপনার কোডটিকে কিছুটা সহজ করার একটি উপায়, যখন এখনও রাষ্ট্র ব্যবহার করা হচ্ছে, তখন দ্বিপথের রাষ্ট্রীয় সংযোগটি আবার ব্যবহার করা উচিত, প্রতিক্রিয়ার সাইটে on পরার যোগ্য! =)
— মাইক 'পোম্যাক্স' কামারম্যানস
2
আরও মনে রাখবেন যে "100 ক্ষেত্র" বেশিরভাগ অপ্রাসঙ্গিক: আপনার ফর্মটি বিভক্ত করুন, কারণ এটি 100 উপাদান নয়, এটি বেশ কয়েকটি বিভাগ, প্রতিটি ইনপুট সহ প্রতিটি অংশ, সুতরাং ভাল নকশা প্রয়োগ করুন এবং প্রতিটি বিভাগকে তার নিজস্ব উপাদান করুন, ফর্মের জন্য গ্রুপিংয়ের উপাদানগুলি সহ গোষ্ঠী। এটি সাধারণত 10 টিরও কম ইনপুটগুলির জন্য একটি উপাদানকে দায়বদ্ধ করে তোলে এবং হঠাৎ আপনার তথ্য আর্কিটেকচারটি আরও অনেক বেশি অর্থবোধ করে। ব্রাউজারের ক্রিয়া হিসাবে ফর্মটি জমা দিন অবশ্যই অবশ্যই "আপনার ফর্ম" দেখে এবং সমস্ত কিছু একসাথে জমা দেয়। পরিষ্কার, লক্ষ্যযুক্ত ইউআই ডিজাইন।
— মাইক 'পোম্যাক্স' কামারম্যানস
2
মন্তব্যের জন্য ধন্যবাদ। তবে আমি লক্ষ্য করেছি যে রিট্যাক্ট ভি 15 হিসাবে রাষ্ট্রের সংযোগটি অবচিত করা হয়েছে।
— জোতিদি
3
@ জেসনচিং এর পরে আপনি কেবল আপনার কোডটিতে সম্ভাব্য বাগ তৈরি করেছেন। প্রতিক্রিয়া ওয়েব পৃষ্ঠাগুলির "সমস্ত হতে হবে, সব শেষ করুন" সমাধান নয়, এটি ইন্টারফেস তৈরির কাঠামো এবং এটি রাষ্ট্র পরিচালনার জন্য এবং দায়িত্বরত ইউআইআই রেন্ডারিংয়ের জন্য দায়ী (আপনার ব্যবহারকারীরা ডোমের সাথে ইন্টারঅ্যাক্ট করেন না, তারা তাদের সাথে যোগাযোগ করেন) প্রতিক্রিয়া জানান: ডিওএম আপডেটগুলি কেবল একটি অ্যাসিনক্রোনাস (তবে অবিশ্বাস্যভাবে দ্রুত) শেষ পদক্ষেপ যাতে ইউআই দৃষ্টিভঙ্গি রাজ্যের প্রতিফলন ঘটায়)। আপনি যদি তা বাইপাস করতে চান তবে আরও গুরুত্বপূর্ণ প্রশ্নটি হল: আপনি কেন প্রতিক্রিয়া ব্যবহার করছেন? কারণ আপনি যে সেরা চিহ্নটিকে ভুল ব্যবহার করছেন তা হ'ল প্রতিক্রিয়া এবং jQuery এর সংমিশ্রণ।
— মাইক 'পোম্যাক্স' কামারম্যানস
17

এরকম কিছু করে ইনপুট ফিল্ডের মান পেতে পরিচালিত:

import React, { Component } from 'react';

class App extends Component {

constructor(props){
super(props);

this.state = {
  username : ''
}

this.updateInput = this.updateInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}


updateInput(event){
this.setState({username : event.target.value})
}


handleSubmit(){
console.log('Your input value is: ' + this.state.username)
//Send state to the server code
}



render(){
return (
    <div>
    <input type="text" onChange={this.updateInput}></input>
    <input type="submit" onClick={this.handleSubmit} ></input>
    </div>
  );
}
} 

//output
//Your input value is: x
— হুগো ওয়েসলি
সূত্র
"সেটস্টেট" কেন ব্যবহার করছেন? এর মধ্যে একটি পুনরায় রেন্ডারিং জড়িত আছে ... তাই না?
— লুকা দাভানজো
15

প্রতিক্রিয়া 16, আমি ব্যবহার

<Input id="number" 
       type="time" 
       onChange={(evt) => { console.log(evt.target.value); }} />
— প্যায় সনে
সূত্র
বয়স লোডে ক্ষেত্রটি স্বয়ংক্রিয়ভাবে জনবসতি হলে কাজ করে না
— সানএমসি
4

আমি "এটি" ফাংশন আপডেট ইনপুটভ্যালু (উদাহরণস্বরূপ) এর সাথে আবদ্ধ করে এটি করতে সফল হয়েছি

this.updateInputValue = this.updateInputValue.bind (এটি);

তবে ইনপুট মান = {this.state.inputValue} ... কোনও ভাল ধারণা হিসাবে দেখা গেছে।

বাবেল ES6 এর সম্পূর্ণ কোডটি এখানে রয়েছে: 

class InputField extends React.Component{


  constructor(props){
   super(props);
   //this.state={inputfield: "no value"};   
   this.handleClick = this.handleClick.bind(this);
   this.updateInputValue = this.updateInputValue.bind(this);
  }

  handleClick(){
   console.log("trying to add picture url");
   console.log("value of input field : "+this.state.inputfield);

  }

  updateInputValue(evt){
    //console.log("input field updated with "+evt.target.value);
    this.state={inputfield: evt.target.value};   

  }

  render(){
    var r; 
    r=<div><input type="text" id="addpixinputfield" 
            onChange={this.updateInputValue} />
      <input type="button" value="add" id="addpix" onClick={this.handleClick}/>
      </div>;    
    return r;
   }
}
— ম্যাথিয়াস লিজ্ট
সূত্র
2

আপনার ত্রুটিটি কারণ আপনি ক্লাস ব্যবহার করেন এবং ক্লাসটি ব্যবহার করার সময় আমাদের ভালভাবে কাজ করার জন্য এটির সাথে ফাংশনগুলি আবদ্ধ করতে হবে। যাইহোক জাভাস্ক্রিপ্টে আমাদের "এটি" এবং "এটি" কী করা উচিত তা অনেকগুলি টিউটোরিয়াল রয়েছে।

আপনি যদি আপনার জমা দেওয়ার বোতামটি সংশোধন করেন তবে এটি কাজ করা উচিত:

<button type="button" onClick={this.onSubmit.bind(this)} className="btn">Save</button>

এবং যদি আপনি কনসোলে সেই ইনপুটটির মান দেখাতে চান তবে আপনাকে var শিরোনাম = this.title.value ব্যবহার করা উচিত;

— সোরেশ বিকে
সূত্র
2
আপনি "এটি" সম্পর্কে আরও জানতে চাইলে এই লিঙ্কটি সহায়ক হতে পারে
— সুরেশ বিকে
— @
1 
// On the state
constructor() {
  this.state = {
   email: ''
 }
}

// Input view ( always check if property is available in state {this.state.email ? this.state.email : ''}

<Input 
  value={this.state.email ? this.state.email : ''} 
  onChange={event => this.setState({ email: event.target.value)}
  type="text" 
  name="emailAddress" 
  placeholder="johdoe@somewhere.com" />
— কিদালি কেভিন
সূত্র
যদিও আপনার উত্তর প্রশ্নের পক্ষে ভাল হতে পারে তবে কিছু ব্যাখ্যা যুক্ত করা সর্বদা ভাল। এটি যুক্ত করতে দয়া করে 2 মিনিট সময় নিন। এটি আপনার উত্তরকে ভবিষ্যতের ব্যবহারকারীদের জন্যও উন্নত করবে।
— দাফয়েস
অবশ্যই, আমি এটি করব।
— কিদালি কেভিন
1

দিন <input>একটি অদ্বিতীয় আইডি

<input id='title' ...>

এবং তারপরে এটি ডিওমে রেফারেন্স করার জন্য মানক ওয়েব এপিআই ব্যবহার করুন

const title = document.getElementById('title').value

প্রতিটি কিপ্রেস দিয়ে ক্রমাগত প্রতিক্রিয়া স্থিতি আপডেট করার দরকার নেই। এটি প্রয়োজন হলে কেবল মানটি পান।

— ব্রেন্ট ওয়াশবার্ন
সূত্র
0

আপনি 'অন চেঞ্জ' ফাংশন যোগ না করে একটি ইনপুট মান পেতে পারেন।

কেবল ইনপুট উপাদানটিতে একটি 'রেফ অ্যাটার' যুক্ত করুন:

এবং তারপরে আপনার যখন প্রয়োজন হয় তখন ইনপুট মান পেতে এই.রিফগুলি ব্যবহার করুন।

— E1ad
সূত্র
3
এটি আর সুপারিশ করা হয় না।
— জোটিডি
1
আপনি সেগুলি ব্যবহার করতে পারেন, তবে প্রপস এবং কলব্যাকগুলি ব্যবহার করে ডেটা প্রবাহকে এক দিকে রাখার পরামর্শ দেওয়া হচ্ছে।
— জোটাইডি
সঠিকভাবে রেফ যুক্ত করার উদাহরণ যুক্ত করা ভাল, অর্থাত্ কোনও উত্তরাধিকারের স্ট্রিংয়ের পরিবর্তে একটি রেফার কলব্যাক ব্যবহার করা।
— জোতিদি
0

আপনার রেফারিকে এতে পরিবর্তন করুন: ref='title'এবং মুছুন name='title' তারপরে মুছুন var title = this.titleএবং লিখুন:

console.log(this.refs.title.value)

এছাড়াও আপনি যোগ .bind(this)করা উচিতthis.onSubmit

(এটা আমার ক্ষেত্রে যা খুবই অনুরূপ ছিল কাজ, কিন্তু এর পরিবর্তে এর onClickআমার কাছে তা থাকত onSubmit={...}এবং এটি আকারে রাখা হয় ( <form onSubmit={...} ></form>))

— কাটারজেনা ওরোস্কা
সূত্র
0

যদি আপনি বর্গ উপাদান ব্যবহারের তারপর মাত্র 3 steps- প্রথমে আপনার আপনার ইনপুট উদাহরণস্বরূপ দায়ের জন্য রাষ্ট্র ঘোষণা করার প্রয়োজন this.state = {নাম: ''} । দ্বিতীয়ত, আপনার স্থিতি স্থাপনের জন্য একটি ফাংশন লিখতে হবে যখন এটি নমুনা উদাহরণস্বরূপ এটি সেটনেম () হিসাবে পরিবর্তিত হয় এবং অবশেষে আপনাকে ইনপুট jsx লিখতে হবে উদাহরণস্বরূপ <ইনপুট মান = {this.name} onChange = {this.setName} />

import React, { Component } from 'react'

export class InputComponents extends Component {
    constructor(props) {
        super(props)

        this.state = {
             name:'',
             agree:false
        }
        this.setName = this.setName.bind(this);
        this.setAgree=this.setAgree.bind(this);
    }

    setName(e){
        e.preventDefault();
        console.log(e.target.value);
        this.setState({
            name:e.target.value
        })
    }
    setAgree(){
        this.setState({
            agree: !this.state.agree
        }, function (){
            console.log(this.state.agree);
        })
    }
    render() {
        return (
            <div>
                <input type="checkbox" checked={this.state.agree} onChange={this.setAgree}></input>
                < input value={this.state.name} onChange = {this.setName}/>
            </div>
        )
    }
}

export default InputComponents
— প্রভু
সূত্র
0 
export default class MyComponent extends React.Component {

onSubmit(e) {
    e.preventDefault();
    var title = this.title.value; //added .value
    console.log(title);
}

render(){
    return (
        ...
        <form className="form-horizontal">
            ...
            <input type="text" className="form-control" ref={input => this.title = input} name="title" />
            ...
        </form>
        ...
        <button type="button" onClick={this.onSubmit} className="btn">Save</button>
        ...
    );
}

};
— প্রণব আগরওয়াল
সূত্র
0

অনিয়ন্ত্রিত ক্ষেত্র ব্যবহার:

export default class MyComponent extends React.Component {

    onSubmit(e) {
        e.preventDefault();
        console.log(e.target.neededField.value);
    }

    render(){
        return (
            ...
            <form onSubmit={this.onSubmit} className="form-horizontal">
                ...
                <input type="text" name="neededField" className="form-control" ref={(c) => this.title = c} name="title" />
                ...
            </form>
            ...
            <button type="button" className="btn">Save</button>
            ...
        );
    }

};
— গেয়র্গ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.