ReactJS এ ফর্ম ডেটা পান

Question

আমার renderফাংশনে একটি সাধারণ ফর্ম রয়েছে , যেমন:

render : function() {
      return (
        <form>
          <input type="text" name="email" placeholder="Email" />
          <input type="password" name="password" placeholder="Password" />
          <button type="button" onClick={this.handleLogin}>Login</button>
        </form>
      );
    },
handleLogin: function() {
   //How to access email and password here ?
}

handleLogin: function() { ... }অ্যাক্সেস Emailএবং Passwordক্ষেত্রগুলিতে আমার কী লিখতে হবে ?

Comments

@ এসোরালেন এই কি বাজে কথা? প্রশ্নকারী একটি এসপিএ তৈরি করতে পারে এবং সম্ভবত ফর্মটি কোনও সাধারণ এইচটিএমএল ফর্মের মতো জমা দিতে চায় না । যদি তারা এটি চায় তবে তারা কোনও ক্রিয়া সংজ্ঞায়িত করবে এবং ইভেন্ট হ্যান্ডলারটি সরিয়ে ফেলবে।

— developerbmw

দ্রষ্টব্য: আপনার onSubmitবোতাম ক্লিকের পরিবর্তে ফর্মটিতে হ্যান্ডেল করা উচিত - এইভাবে আপনি এন্টার টিপে ফর্মটি জমা দেওয়া ব্যবহারকারীকেও পরিচালনা করবেন।

— developerbmw

ব্যবহারকারী যখন ফর্মের যে কোনওটিতে প্রবেশ করে টিপুন তখন একটি <form>সহ <button>বা তার <input>সাথে type=submitজমা দেওয়া হবে <input type=text>। আপনি যদি onClickকোনও বোতামের উপর নির্ভর করেন তবে ব্যবহারকারীর অবশ্যই বাটনটি ক্লিক করতে হবে বা এটি ফোকাস করতে হবে এবং এন্টার / স্পেসবার টিপুন। ব্যবহার onSubmitউভয় ব্যবহারের ক্ষেত্রে সক্ষম করবে will ফর্মগুলি জমা দেওয়ার জন্য এন্টারটিকে সমর্থন করে না, তারা ভাঙ্গা অনুভব করতে পারে।

— রস অ্যালেন

Answer 1

changeউপাদানগুলির স্থিতি আপডেট করতে এবং এতে অ্যাক্সেস করতে ইনপুটগুলিতে ইভেন্টগুলি ব্যবহার করুন handleLogin:

handleEmailChange: function(e) {
   this.setState({email: e.target.value});
},
handlePasswordChange: function(e) {
   this.setState({password: e.target.value});
},
render : function() {
      return (
        <form>
          <input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} />
          <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange}/>
          <button type="button" onClick={this.handleLogin}>Login</button>
        </form>);
},
handleLogin: function() {
    console.log("EMail: " + this.state.email);
    console.log("Password: " + this.state.password);
}

ওয়ার্কিং বেহালার ।

এছাড়াও, দস্তাবেজগুলি পড়ুন, হ্যান্ডলিং: ফর্মগুলি তৈরি করতে উত্সর্গীকৃত একটি সম্পূর্ণ বিভাগ রয়েছে

পূর্বে আপনি একই জিনিসটি অর্জন করতে প্রতিক্রিয়াটির দ্বি-মুখী ডেটাবাইন্ডিং সহায়ক মিক্সিনও ব্যবহার করতে পারতেন, তবে এখন এটি মান এবং পরিবর্তন হ্যান্ডলারটি (উপরে হিসাবে) সেট করার পক্ষে অবমূল্যায়ন করা হয়েছে:

var ExampleForm = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {email: '', password: ''};
  },
  handleLogin: function() {
    console.log("EMail: " + this.state.email);
    console.log("Password: " + this.state.password);
  },
  render: function() {
    return (
      <form>
        <input type="text" valueLink={this.linkState('email')} />
        <input type="password" valueLink={this.linkState('password')} />
        <button type="button" onClick={this.handleLogin}>Login</button>
      </form>
    );
  }
});

ডকুমেন্টেশন এখানে: দ্বিমুখী বাইন্ডিং সহায়ক ।

Comments

এর কার্যকারিতাটি সঠিকভাবে নকল করতে valueLink, আপনার প্রথম উদাহরণে valueইনপুট উপাদানগুলির সেট করা উচিত । তা ছাড়া মানগুলি প্রতিক্রিয়া পদগুলিতে "নিয়ন্ত্রিত" হয়। <input ... value={this.state.password}>।

— রস অ্যালেন

আপনি বোতামটি অন ক্লিকের পরিবর্তে ফর্মের সাথে একটি অনসমিটও ব্যবহার করতে পারেন

— সাই

কেন ফর্মের প্রতিটি উপাদান জন্য একটি রাষ্ট্র ব্যবহার? অন্য কেউ ভাবেন যে এটি একটি খারাপ প্যাটার্ন?

— ইভিভানস

দেখে মনে হচ্ছে মানটির লিঙ্কটি অবমূল্যায়িত হয়েছে

— ম্যাট

এটি কি পুরো সময়ের জন্য ক্লায়েন্টের স্পষ্ট পাঠ্যে পাসওয়ার্ডটি সংরক্ষণ করে না? এটি পাসওয়ার্ড ক্ষেত্রের জন্য সত্যিই উপযুক্ত বলে মনে হচ্ছে না।

— নিউবিজেড

Answer 2

এটি করার কয়েকটি উপায় রয়েছে:

1) সূচক দ্বারা ফর্ম উপাদানগুলির অ্যারের থেকে মানগুলি পান

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target[0].value)
}

2) এইচটিএমএলে নাম বৈশিষ্ট্য ব্যবহার করে

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target.elements.username.value) // from elements property
  console.log(event.target.username.value)          // or directly
}

<input type="text" name="username"/>

3) রেফ ব্যবহার করে

handleSubmit = (event) => {
  console.log(this.inputNode.value)
}

<input type="text" name="username" ref={node => (this.inputNode = node)}/>

পুরো উদাহরণ

class NameForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault()
    console.log(event.target[0].value)
    console.log(event.target.elements.username.value)
    console.log(event.target.username.value)
    console.log(this.inputNode.value)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            name="username"
            ref={node => (this.inputNode = node)}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    )
  }
}

Comments

এটি একটি দুর্দান্ত উত্তর। একাধিক উপায়ে এটি করার জন্য আপনাকে ধন্যবাদ।

— বিউ স্মিথ

বিকল্প 2 আমার জন্য কাজ করে না। আমার

— ইনপুটটির

@ ম্যাডাকল এটি হতে পারে আপনার একই নামের সাথে কিছু ইনপুট রয়েছে

— আলিয়াকসান্দ্র সুসকভিচ

Answer 3

বিকল্প বিকল্প হল refবৈশিষ্ট্যটি ব্যবহার করা এবং এর সাথে মানগুলি উল্লেখ করা this.refs। এখানে একটি সহজ উদাহরণ:

render: function() {
    return (<form onSubmit={this.submitForm}>
        <input ref="theInput" />
    </form>);
},
submitForm: function(e) {
    e.preventDefault();
    alert(React.findDOMNode(this.refs.theInput).value);
}

প্রতিক্রিয়া দস্তাবেজগুলিতে আরও তথ্য পাওয়া যাবে: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute

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

Comments

এই সমাধানটি কি আসলেই আরও ভাল এবং প্রশ্ন সময়ে পাওয়া যায় নি, বা এটি "কুরুচিপূর্ণ"?

— ওয়াগনার লিওনার্দি

আসলে আপনার প্রয়োজন নেই React.findDOMNode this.refs.the ইনপুট ইতিমধ্যে একটি এইচটিএমএল নোড

— ফারিদ অ্যালামনোউটি

Answer 4

রেফের সাথে কাজ করার একটি সহজ উপায়:

class UserInfo extends React.Component {

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

  handleSubmit(e) {
    e.preventDefault();
    
    const formData = {};
    for (const field in this.refs) {
      formData[field] = this.refs[field].value;
    }
    console.log('-->', formData);
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <input ref="phone" className="phone" type='tel' name="phone"/>
            <input ref="email" className="email" type='tel' name="email"/>
            <input type="submit" value="Submit"/>
          </form>
        </div>
    );
  }
}

export default UserInfo;

Comments

এই পদ্ধতিটি ভবিষ্যতে একদিন অবমূল্যায়ন করা হবে। রেফগুলি কেবল কলব্যাকগুলির সাথে ব্যবহৃত হয় এবং স্ট্রিং নয়। আরও তথ্যের জন্য: ফেসবুক.

— github.io/react/docs/refs-and-the-dom.html

শান্ত! :) আমি এই মত Object.keys()অনুসরণ করতে ব্যবহার করতে map()চাই:Object.keys(this.refs).map(field => formData[field] = this.refs[field].value)

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

হ্যাঁ স্ট্রিং রেফগুলি হ্রাস করা হয়েছে। এখনই এটি করার আরও ভাল উপায় হ'ল অন চেঞ্জ কলব্যাক ব্যবহার করা। আপনি যদি এখনও রেফ ব্যবহার করতে চান তবে আপনি এই সিনট্যাক্যাক্সটি ব্যবহার করতে পারেন:<input type="text" ref={(input) => { this.textInput = input; }} />

— E.

আমি @ ই.ফোর্তেস্টস, আপনি দয়া করে অন চেঞ্জ কলব্যাক পদ্ধতিটি ব্যাখ্যা করতে পারেন? আপনি যদি অনেক ধন্যবাদ। আমাকে ট্যাগ করুন যাতে আমি আপনার উত্তর সম্পর্কে অবহিত করা হবে।

— সিমোনা আদ্রিয়ানি

একটি সহজ উপায় হতে পারে (দুঃখিত কোড ফরম্যাটারটি কাজ করছে না): শ্রেণি নেমফর্ম রিঅ্যাক্ট বাড়ায়। উপাদান omp নির্মাতা (প্রপস) {সুপার (প্রপস); this.state = {মান: ''}; this.handleChange = this.handleChange.bind (এটি); } হ্যান্ডেল চেঞ্জ (ইভেন্ট) {this.setState ({মান: ইভেন্ট.target.value}); nder রেন্ডার () {রিটার্ন (<for> <label> নাম: <ইনপুট টাইপ = "পাঠ্য" মান = {this.state.value} onChange = {this.handleChange} /> </label> </form>); }}

— ই

Answer 5

মাইকেল শকের উত্তরে যুক্ত করা:

class MyForm extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    console.log(data.get('email')); // reference by form input's `name` tag

    fetch('/api/form-submit-url', {
      method: 'POST',
      body: data,
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

        <label htmlFor="email">Enter your email</label>
        <input id="email" name="email" type="email" />

        <label htmlFor="birthdate">Enter your birth date</label>
        <input id="birthdate" name="birthdate" type="text" />

        <button>Send data!</button>
      </form>
    );
  }
}

এই মিডিয়াম নিবন্ধটি দেখুন: কীভাবে প্রতিক্রিয়া সহ ফর্মগুলি পরিচালনা করবেন

সাবমিট বাটন টিপলেই এই পদ্ধতিটি ফর্ম ডেটা পেয়ে যায়। অনেক ক্লিনার আইএমও!

Comments

নিখুঁত উত্তর. 👌

— মিশাল

Answer 6

আপনি onClickবোতামে ইভেন্ট হ্যান্ডলারটি onSubmitফর্মের একটি হ্যান্ডলারে স্যুইচ করতে পারেন :

render : function() {
      return (
        <form onSubmit={this.handleLogin}>
          <input type="text" name="email" placeholder="Email" />
          <input type="password" name="password" placeholder="Password" />
          <button type="submit">Login</button>
        </form>
      );
    },

তারপরে আপনি FormDataফর্মটি বিশ্লেষণ করতে ব্যবহার করতে পারেন (এবং যদি আপনি চান তবে তার প্রবেশদ্বারগুলি থেকে JSON অবজেক্টটি তৈরি করুন)।

handleLogin: function(e) {
   const formData = new FormData(e.target)
   const user = {}

   e.preventDefault()

   for (let entry of formData.entries()) {
       user[entry[0]] = entry[1]
   }

   // Do what you will with the user object here
}

Comments

এই প্লাসটি চালিয়ে যাচ্ছে 'কনসোল.লগ (ব্যবহারকারী);' কোন ব্যবহারযোগ্য মান সহ একটি বস্তু দেয়! কোন মতামত?

— এম

@ মাহদীরাফাতজাহ ¯ \ _ (ツ) _ / ¯ - এটি এই ফিডেলে

— মাইকেল শক

আমার এক বন্ধু আমাকে নথিটি প্রতিক্রিয়া জানাতে পাঠিয়েছে এবং তারা এগুলি করে চলেছে reactjs.org/docs/forms.html# নিয়ন্ত্রণ নিয়ন্ত্রিত

— এম

দুর্দান্ত,

— এটিকে

Answer 7

আমি নিম্নলিখিত পদ্ধতির পরামর্শ দেব:

import {Autobind} from 'es-decorators';

export class Form extends Component {

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

    @Autobind
    add(e) {
        e.preventDefault();
        this.collection.add(this.state);
        this.refs.form.reset();
    }

    shouldComponentUpdate() {
        return false;
    }

    render() {
        return (
            <form onSubmit={this.add} ref="form">
                <input type="text" name="desination" onChange={this.handleChange}/>
                <input type="date" name="startDate" onChange={this.handleChange}/>
                <input type="date" name="endDate" onChange={this.handleChange}/>
                <textarea name="description" onChange={this.handleChange}/>
                <button type="submit">Add</button>
            </form>
        )
    }

}

Answer 8

যদি আপনার সমস্ত ইনপুট / টেক্সারিয়ার একটি নাম থাকে তবে আপনি সমস্ত ইভেন্ট থেকে শুরু করে ফিল্টার করতে পারবেন tar

onSubmit(event){
  const fields = Array.prototype.slice.call(event.target)
      .filter(el => el.name)
      .reduce((form, el) => ({
        ...form,
        [el.name]: el.value,
      }), {})
}

সম্পূর্ণরূপে অনিয়ন্ত্রিত ফর্ম on onChange পদ্ধতি, মান, ডিফল্টভ্যালু ছাড়া ...

Answer 9

যারা রেফ ব্যবহার করতে এবং OnChangeইভেন্টের সাথে রাষ্ট্রটি পুনরায় সেট করতে চান না তাদের জন্য , আপনি কেবলমাত্র সহজ অন-সাবমিট হ্যান্ডেল এবং FormDataঅবজেক্টটির মাধ্যমে লুপটি ব্যবহার করতে পারেন । এই উদাহরণটি প্রতিক্রিয়া হুক ব্যবহার করছে:

const LoginPage = () =>{
    const handleSubmit = (event) => {
        const formData = new FormData(event.target);
        event.preventDefault();
        for (var [key, value] of formData.entries()) {
            console.log(key, value);
        }
    }

    return (
        <div>
        <form onSubmit={
        handleSubmit
        }

        >
        <input type="text" name="username" placeholder="Email" />
        <input type="password" name="password"
        placeholder="Password" />
        <button type="submit">Login</button>
        </form>
        </div>)
        }

Comments

দুর্দান্ত উত্তর, তবে একটি নটপিক আপনি অন্যথায় নিখুঁত সমাধানটি সরিয়ে ফেলতে পারে!

— লুই 345

Answer 10

এছাড়াও, এটিও ব্যবহার করা যেতে পারে।

handleChange: function(state,e) {
  this.setState({[state]: e.target.value});
},
render : function() {
  return (
    <form>
      <input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
      <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handleChange.bind(this, 'password')}/>
      <button type="button" onClick={this.handleLogin}>Login</button>
    </form>
  );
},
handleLogin: function() {
  console.log("EMail: ", this.state.email);
  console.log("Password: ", this.state.password);
}

Comments

এই উত্তরটি কেন যাওয়ার সঠিক উপায় তা দয়া করে একটি ব্যাখ্যা অন্তর্ভুক্ত করুন।

— টিম হাচিসন

আমি পাঠ্য ফর্মটি পরিবর্তন করতে একটি মাত্র পদ্ধতি ব্যবহার করি

— ইউরি কসিগিন

পাসওয়ার্ডটি দেব সরঞ্জামগুলিতে প্রতিক্রিয়া দেখা যায়, কিছুটা সুরক্ষা সমস্যা আছে?

— নীল

Answer 11

আপনার ইনপুটগুলি এই জাতীয় রেফারেশন দিন

<input type="text" name="email" placeholder="Email" ref="email" />
<input type="password" name="password" placeholder="Password" ref="password" />

তারপরে আপনি এটিকে আপনার হ্যান্ডলগুলিতে সু এর মতো অ্যাক্সেস করতে পারবেন

handleLogin: function(e) {
   e.preventDefault();
    console.log(this.refs.email.value)
    console.log(this.refs.password.value)
}

Answer 12

এস 6 ধ্বংসাত্মক সহ আরও সুস্পষ্ট উদাহরণ

class Form extends Component {
    constructor(props) {
        super(props);
        this.state = {
            login: null,
            password: null,
            email: null
        }
    }

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

    onSubmit(e) {
        e.preventDefault();
        let login = this.state.login;
        let password = this.state.password;
        // etc
    }

    render() {
        return (
            <form onSubmit={this.onSubmit.bind(this)}>
                <input type="text" name="login" onChange={this.onChange.bind(this)} />
                <input type="password" name="password" onChange={this.onChange.bind(this)} />
                <input type="email" name="email" onChange={this.onChange.bind(this)} />
                <button type="submit">Sign Up</button>
            </form>
        );
    }
}

Answer 13

আপনি যদি আপনার প্রকল্পে রেডাক্স ব্যবহার করেন তবে আপনি এই উচ্চতর অর্ডার উপাদান https://github.com/erikras/redux-for ব্যবহার বিবেচনা করতে পারেন ।

Answer 14

জাভাস্ক্রিপ্টে অনেক ইভেন্টে, আমরা আছে event যা ঘটেছিল তাতে কী ঘটেছিল তা কী ঘটেছিল এবং মানগুলি কী কী তা সহ ...

আমরা রিঅ্যাকটজেগুলিতেও ফর্মগুলির সাথে এটি ব্যবহার করি ...

সুতরাং আপনার কোডে আপনি রাষ্ট্রটিকে নতুন মান হিসাবে সেট করেছেন ... এরকম কিছু:

class UserInfo extends React.Component {

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

  handleLogin(e) {
    e.preventDefault();
    for (const field in this.refs) {
      this.setState({this.refs[field]: this.refs[field].value});
    }
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleLogin}>
            <input ref="email" type="text" name="email" placeholder="Email" />
            <input ref="password" type="password" name="password" placeholder="Password" />
            <button type="button">Login</button>
          </form>
        </div>
    );
  }
}

export default UserInfo;

ভবিষ্যতে আপনি যে ফর্মটি তৈরি করছেন তার রেফারেন্স হিসাবে এটি প্রতিক্রিয়া v.16-এ ফর্মের উদাহরণ:

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

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

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

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Answer 15

আমি প্রতিক্রিয়া অংশের অবস্থাটি ব্যবহার করে এটির মতো ব্যবহার করি:

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

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

Answer 16

 onChange(event){
     console.log(event.target.value);
  }
  handleSubmit(event){ 
    event.preventDefault();
    const formData = {};
      for (const data in this.refs) {
        formData[data] = this.refs[data].value;
      }
    console.log(formData);
  }



 <form onSubmit={this.handleSubmit.bind(this)}>
  <input type="text" ref="username" onChange={this.onChange} className="form-control"/>
  <input type="text" ref="password" onChange={this.onChange} className="form-control"/>
  <button type="submit" className="btn-danger btn-sm">Search</button>
 </form>

আউটপুট চিত্র এখানে সংযুক্ত

Comments

দয়া করে একটি ব্যাখ্যাও সরবরাহ করুন।

— ব্ল্যাকবিয়ার্ড

আমি এটি ব্যাখ্যা করার চেষ্টা করব, যা আমি উজ্জ্বল পেয়েছি। হ্যান্ডেল সাবমিট () ফাংশনে আপনি একটি অবজেক্ট (ফর্মডাটা) তৈরি করছেন যেখানে কীটি হ'ল ফর্মের প্রতিটি ইনপুট ('formData [ডেটা]' বিবৃতি) এর 'রেফ' বৈশিষ্ট্য, এবং মান ইনপুটটির মান এই 'রেফ' বৈশিষ্ট্য ('this.refs [ডেটা]। মূল্য' বিবৃতি) সহ 'FormData [data] = this.refs [data]। Value' দিয়ে আপনি এই অবজেক্টটি তৈরি করছেন। আপনি বলছেন, আক্ষরিক: formData ['ব্যবহারকারীর নাম'] = (ব্যবহারকারীর নাম ইনপুট এর মান) এবং formData ['পাসওয়ার্ড'] = (পাসওয়ার্ড ইনপুট এর মান) আউটপুট হবে: {ব্যবহারকারী: 'ব্লেব্লাবলা', পাসওয়ার্ড: 'xxx '}

— সিমোনা আদ্রিয়ানি

আপনার ব্যাখ্যার জন্য আপনাকে @ সিমোনা অ্যাড্রিয়ানি ধন্যবাদ।

— মিলান পানিগ্রাহী

Answer 17

এটি মেটিওর (ভি 1.3) ব্যবহারকারীদের সহায়তা করতে পারে:

render: function() {
    return (
        <form onSubmit={this.submitForm.bind(this)}>
            <input type="text" ref="email" placeholder="Email" />
            <input type="password" ref="password" placeholder="Password" />
            <button type="submit">Login</button>
        </form>
    );
},
submitForm: function(e) {
    e.preventDefault();
    console.log( this.refs.email.value );
    console.log( this.refs.password.value );
}

Comments

this.submitForm.bind (এটি) ঠিক হওয়া উচিত: this.submitForm

— rekarnar

ত্রুটি: স্টেটলেস ফাংশন উপাদানগুলিতে রেফ থাকতে পারে না।

— holms

আপনি কি উল্কা ব্যবহার করছেন (v1.3)?

— জো এল।

Answer 18

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

নিম্নলিখিত পদ্ধতিটি প্রথম রাষ্ট্র পরিবর্তন করে:

handleSubmit(e) {
    e.preventDefault();
    this.setState({ message: 'Sending...' }, this.sendFormData);
}

প্রতিক্রিয়া স্ক্রিনে উপরের বার্তা প্রেরণটি দেখানোর সাথে সাথে এটি সেই পদ্ধতিতে কল করবে যা ফর্ম ডেটাটি সার্ভারে প্রেরণ করবে: this.sendFormData ()। সরলতার জন্য আমি এটির অনুকরণে একটি সেট টাইমআউট যুক্ত করেছি।

sendFormData() {
  var formData = {
      Title: this.refs.Title.value,
      Author: this.refs.Author.value,
      Genre: this.refs.Genre.value,
      YearReleased: this.refs.YearReleased.value};
  setTimeout(() => { 
    console.log(formData);
    this.setState({ message: 'data sent!' });
  }, 3000);
}

প্রতিক্রিয়া হিসাবে, পদ্ধতিটি.সেটস্টেট () নতুন বৈশিষ্ট্য সহ একটি উপাদানকে রেন্ডার করে। সুতরাং আপনি ফর্ম উপাদানটির রেন্ডার () পদ্ধতিতে কিছু যুক্তি যুক্ত করতে পারেন যা সার্ভার থেকে আমরা যেভাবে সাড়া পাই তার উপর নির্ভর করে ভিন্ন আচরণ করবে। এই ক্ষেত্রে:

render() {
  if (this.state.responseType) {
      var classString = 'alert alert-' + this.state.type;
      var status = <div id="status" className={classString} ref="status">
                     {this.state.message}
                   </div>;
  }
return ( ...

codepen

Answer 19

আপনার যদি কোনও উপাদানের নামের একাধিক উপস্থিতি থাকে তবে আপনাকে প্রতিটি () এর জন্য ব্যবহার করতে হবে।

এইচটিএমএল

  <input type="checkbox" name="delete" id="flizzit" />
  <input type="checkbox" name="delete" id="floo" />
  <input type="checkbox" name="delete" id="flum" />
  <input type="submit" value="Save"  onClick={evt => saveAction(evt)}></input>

JS

const submitAction = (evt) => {
  evt.preventDefault();
  const dels = evt.target.parentElement.delete;
  const deleted = [];
  dels.forEach((d) => { if (d.checked) deleted.push(d.id); });
  window.alert(deleted.length);
};

মনে রাখবেন যে এই ক্ষেত্রে ডেলগুলি একটি রেডিওনোডলিস্ট, কোনও অ্যারে নয়, এবং কোনও মূল্যবান নয়। ফরইচ () হ'ল তালিক শ্রেণির অন্তর্নির্মিত পদ্ধতি। আপনি এখানে কোনও মানচিত্র () ব্যবহার করতে বা () হ্রাস করতে পারবেন না।

Answer 20

আপডেট: আপনি এখন ফর্মিককে একটি বাহ্যিক প্যাকেজ ব্যবহার করতে পারেন প্রতিক্রিয়া জানাতে যা ফর্মগুলির সাথে কাজ করা এত সহজ করে দেয়!

শুরু করার জন্য লিঙ্কটি এখানে

https://jaredpalmer.com/formik