প্রতিক্রিয়া.জেএস: একটি অন চেঞ্জ হ্যান্ডলারের সাহায্যে পৃথক ইনপুট সনাক্ত করা

Question

এটি দেখার সঠিক উপায়টি কী তা আগ্রহী:

var Hello = React.createClass({
getInitialState: function() {
    return {total: 0, input1:0, input2:0};
},
render: function() {
    return (
        <div>{this.state.total}<br/>
            <input type="text" value={this.state.input1} onChange={this.handleChange} />
            <input type="text" value={this.state.input2} onChange={this.handleChange} />
        </div>
    );
},
handleChange: function(e){
    this.setState({ ??? : e.target.value});
    t = this.state.input1 + this.state.input2;
    this.setState({total: t});
}
});

React.renderComponent(<Hello />, document.getElementById('content'));

স্পষ্টতই আপনি প্রতিটি পৃথক ইনপুট হ্যান্ডেল করার জন্য পৃথক হ্যান্ডেল চেঞ্জ ফাংশন তৈরি করতে পারেন তবে এটি খুব সুন্দর নয়। একইভাবে আপনি কেবল একটি পৃথক ইনপুট জন্য একটি উপাদান তৈরি করতে পারে, কিন্তু আমি দেখতে চেয়েছিলাম এটি করার উপায় আছে কিনা।

Answer 1

আমি মান এইচটিএমএল বৈশিষ্ট্যাবলী স্টিকিং প্রস্তাব দেওয়া nameউপর inputউপাদানসমূহ আপনার ইনপুট সনাক্ত করতে। এছাড়াও, আপনার "মোট "টিকে পৃথক মান হিসাবে রাখতে হবে না কারণ এটি আপনার রাজ্যে অন্যান্য মান যুক্ত করে কম্পোজেবল:

var Hello = React.createClass({
    getInitialState: function() {
        return {input1: 0, input2: 0};
    },
    render: function() {
        const total = this.state.input1 + this.state.input2;

        return (
            <div>{total}<br/>
                <input type="text" value={this.state.input1} name="input1" onChange={this.handleChange} />
                <input type="text" value={this.state.input2} name="input2" onChange={this.handleChange} />
            </div>
        );
    },
    handleChange: function(e) {
        this.setState({[e.target.name]: e.target.value});
    }
});

React.renderComponent(<Hello />, document.getElementById('content'));

Comments

আমি প্রথমে এটি করার চেষ্টা করছিলাম, তবে সেটস্টেট ({e.target.name ... কাজ করে না — এটি একটি সিনট্যাক্স ত্রুটি obj আপনাকে আপত্তি [e.target.name] দিয়ে একটি অস্থায়ী বস্তু তৈরি করতে হবে এবং সেটির জন্য সেটস্টেট করতে হবে। এই ধরণের কাজ, তবে রাষ্ট্রীয় অবজেক্ট আপডেটে একরকম বিলম্ব হচ্ছে বলে মনে হচ্ছে

— T3db0t

অনুরোধএনিমেশনফ্রেম (আমি ধরে নিই) চলাকালীন "ধরণের বিলম্ব" সেটটি স্টেট আপডেট করা হয়, সুতরাং সেই মন্তব্যটিকে উপেক্ষা করুন

— T3db0t

@ T3db0t এই ES6 সিনট্যাক্সটি কাজ করে:this.setState({ [e.target.name]: e.target.value });

— XåpplI'-I0llwlg'I -

বাঁধাই ব্যবহার করা ভাল পদ্ধতির। কোনও নাম সম্পত্তি যেমন ডিভ হিসাবে কোনও উপাদানকে অন চেঞ্জ হ্যান্ডলার সংযুক্ত করে যদি এই পদ্ধতির কাজ হয় না।

— এরিকগ্রোস

আপনি অনেক অপ্রয়োজনীয় ফাংশন তৈরি করায় @ অ্যারিকগ্রোস বাঁধাই এই ক্ষেত্রে ভাল নয়। এছাড়াও, প্রয়োজন হলে আপনি কোনও ডেটা-অ্যাট্রিবিউট বা ভিন্ন উপাদানের উপর কিছু ব্যবহার করতে পারেন

— aw04

Answer 2

আপনি .bindপদ্ধতির পরামিতিগুলি প্রাক-বিল্ড করতে পদ্ধতিটি ব্যবহার করতে পারেন handleChange। এটি এমন কিছু হবে:

  var Hello = React.createClass({
    getInitialState: function() {
        return {input1:0, 
                input2:0};
    },
    render: function() {
      var total = this.state.input1 + this.state.input2;
      return (
        <div>{total}<br/>
          <input type="text" value={this.state.input1} 
                             onChange={this.handleChange.bind(this, 'input1')} />
          <input type="text" value={this.state.input2} 
                             onChange={this.handleChange.bind(this, 'input2')} />
        </div>
      );
    },
    handleChange: function (name, e) {
      var change = {};
      change[name] = e.target.value;
      this.setState(change);
    }
  });

  React.renderComponent(<Hello />, document.getElementById('content'));

(আমিও totalরেন্ডার সময় গণনা করা হয়েছে, এটি করা প্রস্তাবিত জিনিস হিসাবে।)

Comments

কেবলমাত্র একটি দ্রুত অনুস্মারক this.handleChange.bind(...)যা একটি নতুন ফাংশন তৈরি করে। আপনি যদি ব্যবহার shouldComponentUpdateকরছেন PureRenderMixinবা এর সাথে অনুরূপ কিছু ভেঙে যাবে। যখন কোনও একক মান পরিবর্তিত হয় তখন আপনার সমস্ত ইনপুট উপাদান পুনরায় রেন্ডার করা হবে।

— zemirco

আপনি বাস্তবায়ন পরিবর্তন করেন তাহলে handleChangeথেকে handleChange(name) { return event => this.setState({name: event.target.value}); }আপনি "একই" ফাংশন পাস করতে পারেন (নতুন ফাংশন হিসাবে এটি ব্যবহার করে সম্পন্ন তৈরী করবে না .bind(): তারপর, আপনি এই ধরনের ফাংশন পাস করতে পারেনthis.handleChange("input1")

— Andreyco

আমি এটি উল্লেখ করাও গুরুত্বপূর্ণ বলে মনে করি যে সেটস্টেটের প্রকৃতিটি হ্যান্ডচ্যাঞ্জ ফাংশনে বর্তমান অবস্থা পুনরুদ্ধার করতে সক্ষম হবে না, উদাহরণস্বরূপ, পূর্ববর্তী রাজ্য, এই.স্টেট.িনপুট 1 ব্যবহার করে। একটি উপযুক্ত দৃষ্টিভঙ্গি যেমন কলব্যাক তৈরি করা হবে যেমন this.setState(change, function () { console.log(this.state.input1); );রেফারেন্স: স্ট্যাকওভারফ্লো

— চার্লি-গ্রিনম্যান

Answer 3

onChangeঘটনা বুদবুদ ... আপনি ভালো কিছু করতে পারেন তাই:

// A sample form
render () {
  <form onChange={setField}>
    <input name="input1" />
    <input name="input2" />
  </form>
}

এবং আপনার সেটফিল্ড পদ্ধতিটি দেখতে দেখতে এটি দেখতে (আপনি ES2015 বা তার পরে ব্যবহার করছেন তা ধরে নিচ্ছেন:

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

আমি বেশ কয়েকটি অ্যাপ্লিকেশনে এর অনুরূপ কিছু ব্যবহার করি এবং এটি বেশ কার্যকর।

Answer 4

অবমানিত সমাধান

valueLink/checkedLinkহয় অবচিত কোর থেকে প্রতিক্রিয়া কারণ এটি কিছু ব্যবহারকারীর বিভ্রান্তিকর। আপনি প্রতিক্রিয়াটির সাম্প্রতিক সংস্করণ ব্যবহার করলে এই উত্তরটি কার্যকর হবে না। তবে আপনি যদি এটি পছন্দ করেন তবে আপনি নিজের Inputউপাদান তৈরি করে সহজেই এটি অনুকরণ করতে পারেন

পুরানো উত্তরের সামগ্রী:

আপনি যা অর্জন করতে চান তা প্রতিক্রিয়ার 2-ওয়ে ডেটা বন্ডিং সহায়কদের ব্যবহার করে খুব সহজেই অর্জন করা যায়।

var Hello = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {input1: 0, input2: 0};
    },

    render: function() {
        var total = this.state.input1 + this.state.input2;
        return (
            <div>{total}<br/>
                <input type="text" valueLink={this.linkState('input1')} />;
                <input type="text" valueLink={this.linkState('input2')} />;
            </div>
        );
    }

});

React.renderComponent(<Hello />, document.getElementById('content'));

সহজ?

http://facebook.github.io/react/docs/two-way-binding-helpers.html

এমনকি আপনি নিজের মিশ্রণটি প্রয়োগ করতে পারেন

Comments

রাজ্যটি নির্ধারণ করতে আমাদের কেন একটি বাঁধা বাঁধতে হবে। এটি আফ্রিকাল প্রতিক্রিয়া!

— জুনেদ কাদির

দ্রষ্টব্য যে এই সমাধানটিকে

— ফিলিপ

Answer 5

আপনি এটি এর মতো করেও করতে পারেন:

...
constructor() {
    super();
    this.state = { input1: 0, input2: 0 };
    this.handleChange = this.handleChange.bind(this);
}

handleChange(input, value) {
    this.setState({
        [input]: value
    })
}

render() {
    const total = this.state.input1 + this.state.input2;
    return (
        <div>
            {total}<br />
            <input type="text" onChange={e => this.handleChange('input1', e.target.value)} />
            <input type="text" onChange={e => this.handleChange('input2', e.target.value)} />
        </div>
    )
}

Comments

আমার জন্য কাজ করেনি। প্রতিক্রিয়াশীল বিকাশকারী সরঞ্জামগুলি দেখেছি। ইনপুট 1 / ইনপুট 2 এর পরিবর্তে ভেরিয়েবল / অবজেক্ট নামে ইনপুট হিসাবে এর মান তৈরি এবং নির্ধারণ করা হয়

— গৌরবস

@ গৌরভরা হ্যাঁ আপনি ঠিক বলেছেন। আমার সেটস্টেটে []প্রায় যোগ করার দরকার ছিল input। এটি সম্পত্তি

— গতিশীলিকে

Answer 6

আপনি একটি বিশেষ ব্যবহার করতে পারেন Reactবৈশিষ্ট্য নামক refএবং তারপর বাস্তব করে DOM নোড মেলে onChangeব্যবহার ঘটনা Reactএর getDOMNode()ফাংশন:

handleClick: function(event) {
  if (event.target === this.refs.prev.getDOMNode()) {
    ...
  }
}

render: function() {
  ...
  <button ref="prev" onClick={this.handleClick}>Previous question</button>
  <button ref="next" onClick={this.handleClick}>Next question</button>
  ...
}

Comments

কমপক্ষে 0.13 এ.রিফগুলির কোনও সম্পত্তি প্রিফ নেই।

— ব্লব

@ ইউসাগিডন - prevএকটি render()পদ্ধতি যা আমি পদ্ধতিটিতে সেট করেছিলাম

— জানুস কাচালক

প্রতিক্রিয়া v0.14 হিসাবে, আপনি ঠিক করতে পারেন event.target === this.refs.prev। ফেসবুক.

— github.io/react/blog/2015/10/07/…

Answer 7

পছন্দ করুন

মাল্টিফিল্ডের ফর্মগুলির ক্ষেত্রে এটি প্রতিক্রিয়াটির মূল বৈশিষ্ট্য: উপাদানগুলি ব্যবহার করা বোধগম্য।

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

[...]

handleChange: function(event) {
  this.setState({value: event.target.value});
},
render: function() {
  var value = this.state.value;
  return <input type="text" value={value} onChange={this.handleChange} />;
}

[...]

Answer 8

আপনি inputএকটি পৃথক InputFieldউপাদান তৈরি করে প্রতিটি সন্তানের মান ট্র্যাক করতে পারেন যা একটি এককটির মান পরিচালনা করে input। উদাহরণস্বরূপ InputFieldহতে পারে:

var InputField = React.createClass({
  getInitialState: function () {
    return({text: this.props.text})
  },
  onChangeHandler: function (event) {
     this.setState({text: event.target.value})
  }, 
  render: function () {
    return (<input onChange={this.onChangeHandler} value={this.state.text} />)
  }
})

এখন প্রতিটি মান inputএই একটি পৃথক উদাহরণস্বরূপ মধ্যে অনুসরণ করা যাবে InputFieldবাবা-মার রাজ্যের পৃথক মান তৈরি প্রতিটি শিশুর উপাদান নিরীক্ষণ করতে থাকলে অংশটি।

Answer 9

আমি সমস্যার সত্যিই সহজ সমাধান সরবরাহ করব। ধরুন আমাদের দুটি ইনপুট রয়েছে usernameএবং passwordতবে আমরা আমাদের হ্যান্ডেলটি সহজ এবং জেনেরিক হতে চাই, তাই আমরা এটিকে পুনরায় ব্যবহার করতে পারি এবং বয়লারপ্লেট কোডটি লিখতে পারি না।

আই.আমাদের ফর্ম:

                <form>
                    <input type="text" name = "username" onChange={this.onChange} value={this.state.username}/>
                    <input type="text" name = "password" onChange={this.onChange} value={this.state.password}/>
                    <br></br>
                    <button type="submit">Submit</button>
                </form>

II.আমাদের নির্মাতা, যা আমরা আমাদের usernameএবং সংরক্ষণ করতে চাই password, তাই আমরা সহজেই তাদের অ্যাক্সেস করতে পারি:

constructor(props) {
    super(props);
    this.state = {
        username: '',
        password: ''
    };

    this.onSubmit = this.onSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
}

III. কেবলমাত্র একটি onChangeইভেন্ট সহ আকর্ষণীয় এবং "জেনেরিক" হ্যান্ডেলটি এর উপর ভিত্তি করে:

onChange(event) {
    let inputName = event.target.name;
    let value = event.target.value;

    this.setState({[inputName]:value});


    event.preventDefault();
}

আমাকে ব্যাখ্যা করতে দাও:

1. যখন কোনও পরিবর্তন সনাক্ত হয় তখন onChange(event)তাকে ডাকা হয়

2. তারপরে আমরা ক্ষেত্রটির নাম প্যারামিটার এবং এর মান পাই:

let inputName = event.target.name; ex: username

let value = event.target.value; ex: itsgosho

৩. নাম প্যারামিটারের ভিত্তিতে আমরা কন্সট্রাক্টরে রাজ্য থেকে আমাদের মূল্য পাই এবং মান সহ এটি আপডেট করি:

this.state['username'] = 'itsgosho'

৪. এখানে লক্ষণীয় কীটি হ'ল রাজ্যের আমাদের প্যারামিটারের সাথে ফিল্ডের নামটি অবশ্যই মিলবে

আশা করি আমি কাউকে কাউকে সাহায্য করেছি :)

Answer 10

আপনার রাজ্যের কী আপনার ইনপুট ফিল্ডের নামের মতো হওয়া উচিত। তারপরে আপনি এটি হ্যান্ডেল ইভেন্ট পদ্ধতিতে করতে পারেন;

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

Answer 11

হাই উচ্চতর উত্তর উন্নতি করেছে । আপনাকে ফাংশন বাঁধতে হবে না কারণ আপনি এটি ছাড়া ইনপুটটিতে অ্যাক্সেস করতে পারেন।

var Hello = React.createClass({
    render: function() {
        var total = this.state.input1 + this.state.input2;
        return (
             <div>{total}<br/>
                  <input type="text" 
                    value={this.state.input1}
                    id="input1"  
                    onChange={this.handleChange} />
                 <input type="text" 
                    value={this.state.input2}
                    id="input2" 
                    onChange={this.handleChange} />
            </div>
       );
   },
   handleChange: function (name, value) {
       var change = {};
       change[name] = value;
       this.setState(change);
   }
});

React.renderComponent(<Hello />, document.getElementById('content'));