রিএ্যাকটিজেএস-এ রেডিও বোতাম কীভাবে ব্যবহার করবেন?

Question

আমি রিএ্যাকটিজেএস-এ নতুন, দুঃখিত যদি এটি বন্ধ হয়। আমার কাছে এমন একটি উপাদান রয়েছে যা প্রাপ্ত তথ্য অনুযায়ী কয়েকটি সারণী সারি তৈরি করে।

কলামের প্রতিটি কক্ষের একটি রেডিও চেকবক্স রয়েছে। সুতরাং ব্যবহারকারী বিদ্যমান সারি থেকে একটি site_nameএবং একটি নির্বাচন করতে পারে address। বাছাইটি ফুটারে প্রদর্শিত হবে। এবং যেখানে আমি আটকে আছি সেখানে।

var SearchResult = React.createClass({
   render: function(){
       var resultRows = this.props.data.map(function(result){
           return (
               <tbody>
                    <tr>
                        <td><input type="radio" name="site_name" value={result.SITE_NAME}>{result.SITE_NAME}</input></td>
                        <td><input type="radio" name="address" value={result.ADDRESS}>{result.ADDRESS}</input></td>
                    </tr>
               </tbody>
           );
       });
       return (
           <table className="table">
               <thead>
                   <tr>
                       <th>Name</th>
                       <th>Address</th>
                   </tr>
               </thead>
                {resultRows}
               <tfoot>
                   <tr>
                       <td>chosen site name ???? </td>
                       <td>chosen address ????? </td>
                   </tr>
               </tfoot>
           </table>
       );
   }
});

JQuery এ আমি $("input[name=site_name]:checked").val()একটি রেডিও চেকবক্স টাইপের নির্বাচন পেতে এবং এটি প্রথম পাদলেখের ঘরে সন্নিবেশ করানোর মতো কিছু করতে পারি ।

তবে অবশ্যই অবশ্যই একটি রিঅ্যাক্টজ পথ থাকতে হবে, যা আমি পুরোপুরি অনুপস্থিত? অনেক ধন্যবাদ

Comments

inputউপাদানগুলির কোনও বিষয়বস্তু নেই। সুতরাং <input>content</input>কোন অর্থ দেয় না এবং অবৈধ। আপনি চাইতে পারেন <label><input />content</label>।

— ওরিওল

কাজ করার জন্য বিভিন্ন মান সহ রেডিও বোতামগুলির একই নাম থাকতে হবে না?

— pgee70

Answer 1

রেন্ডারিংয়ে যে কোনও পরিবর্তন হ'লstate বা props( প্রতিক্রিয়া ডক ) মাধ্যমে পরিবর্তন করা উচিত ।

সুতরাং আমি এখানে ইনপুট ইভেন্টটি নিবন্ধন করি এবং তারপরে পরিবর্তনটি পরিবর্তন করে stateযা পাদলেখগুলিতে প্রদর্শন করতে রেন্ডারটিকে ট্রিগার করবে।

var SearchResult = React.createClass({
  getInitialState: function () {
    return {
      site: '',
      address: ''
    };
  },
  onSiteChanged: function (e) {
    this.setState({
      site: e.currentTarget.value
      });
  },

  onAddressChanged: function (e) {
    this.setState({
      address: e.currentTarget.value
      });
  },

  render: function(){
       var resultRows = this.props.data.map(function(result){
           return (
               <tbody>
                    <tr>
                        <td><input type="radio" name="site_name" 
                                   value={result.SITE_NAME} 
                                   checked={this.state.site === result.SITE_NAME} 
                                   onChange={this.onSiteChanged} />{result.SITE_NAME}</td>
                        <td><input type="radio" name="address" 
                                   value={result.ADDRESS}  
                                   checked={this.state.address === result.ADDRESS} 
                                   onChange={this.onAddressChanged} />{result.ADDRESS}</td>
                    </tr>
               </tbody>
           );
       }, this);
       return (
           <table className="table">
               <thead>
                   <tr>
                       <th>Name</th>
                       <th>Address</th>
                   </tr>
               </thead>
                {resultRows}
               <tfoot>
                   <tr>
                       <td>chosen site name {this.state.site} </td>
                       <td>chosen address {this.state.address} </td>
                   </tr>
               </tfoot>
           </table>
       );
  }
});

jsbin

Comments

এটা খুব দরকারী ছিল। ধন্যবাদ। আমি যা বুঝতে পারি না তা হ'ল }, this);নীচে </tbody>। এটা কি এবং এটা কি কাজ করে? আমি লক্ষ্য করেছি যে কোডটি ক্র্যাশ না করেই।

— হিউম্যান

thisপ্রসঙ্গ প্রেরণ করা mapফাংশন । এটি @ ফেকরাইনব্রিগান্ডের সম্পাদনা ছিল, ভাল ধরা! তা ছাড়া আপনার thisমানচিত্র ফাংশনে পড়ুন হবে window, যা কোন ধারণা কি হয়েছে stateসম্পর্কে

— ChinKang

thisআপনি যদি নিয়মিত ফাংশনের পরিবর্তে ES6 তীর ব্যবহার করেন তবে এই কৌশলটি অপ্রয়োজনীয়। উদাহরণস্বরূপ: var resultRows = this.props.data.map((result) => { ... });আমি কেবল এটি উল্লেখ করেছি কারণ প্রতিক্রিয়া-এররা সাধারণত ইতিমধ্যে কিছু প্রকারের প্রতিস্থাপনের (জেএসএক্সের জন্য) ব্যবহার করে থাকে, তাই সাধারণত ES6 সহজেই পৌঁছাতে পারে within

— টম

রেডিও বোতামগুলির মান পেতে দুটি ফাংশন ব্যবহার করা অস্পষ্ট এবং অপ্রয়োজনীয় বলে মনে হয়। আপনি কেবল একটি ফাংশন সংজ্ঞায়িত করতে পারেন, সম্ভবতonInputChange (e) {this.setState({ [e.target.name]: e.target.value }); }

— xplorer1

Answer 2

প্রতিক্রিয়ার জেএসে রেডিও বোতাম প্রয়োগের একটি সহজ উপায় এখানে।

class App extends React.Component {
  
  setGender(event) {
    console.log(event.target.value);
  }
  
  render() {
    return ( 
      <div onChange={this.setGender.bind(this)}>
        <input type="radio" value="MALE" name="gender"/> Male
        <input type="radio" value="FEMALE" name="gender"/> Female
      </div>
     )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

সম্পাদিত

আপনি বাঁধার পরিবর্তে তীর ফাংশন ব্যবহার করতে পারেন। উপরের কোডটি প্রতিস্থাপন করুন

<div onChange={event => this.setGender(event)}>

ডিফল্ট মান ব্যবহারের জন্য defaultChecked, এটির মতো

<input type="radio" value="MALE" defaultChecked name="gender"/> Male

Comments

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

— উডেনকিটি

প্রতিটি রেন্ডারে নতুন ফাংশনটি কেবল তখনই সমস্যা হতে পারে যদি কোনও শিশু উপাদানকে প্রপস হিসাবে এই ফাংশনটি পাস করে দেওয়া হয়। সেক্ষেত্রে প্রপস প্রাপ্ত শিশু উপাদানগুলি অযৌক্তিকভাবে রেন্ডার হতে পারে। পিতা বা মাতা উপাদান ভাল হবে।

— মার্ক ম্যাকলেভি

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

— স্ক্যুলার

@ সহিথিয়ান আমার সমস্ত রেডিওর সাথে একই নামের বৈশিষ্ট্য যুক্ত ছিল। পরিণত হয়েছে আমার একটি অনক্লিক হ্যান্ডলারের পরিবর্তে রেডিও ইনপুটগুলিতে অনক্লিক হ্যান্ডলার লাগানো দরকার। কৌতুকটি করেছে।

— স্ক্যুলার

আমি @ স্কলারারের সাথে একমত - অন চেঞ্জ সহ, হ্যান্ডেলটি কেবলমাত্র ডিভের অধীনে অন্তর্ভুক্ত প্রতিটি রেডিও বোতামের জন্য একবারে জ্বলজ্বল করে। অনক্লিকের সাহায্যে এটি একাধিকবার কাজ করে। কেন এটি আপনার স্নিপেটের সাথে তুলনা করা হচ্ছে তা নিশ্চিত নয় ...

— JESii

Answer 3

ডক্স কী প্রতিক্রিয়া জানায় তার ভিত্তিতে :

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

উদাহরণ স্বরূপ:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleChange = e => {
    const { name, value } = e.target;

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

  render() {
    return (
      <div className="radio-buttons">
        Windows
        <input
          id="windows"
          value="windows"
          name="platform"
          type="radio"
          onChange={this.handleChange}
        />
        Mac
        <input
          id="mac"
          value="mac"
          name="platform"
          type="radio"
          onChange={this.handleChange}
        />
        Linux
        <input
          id="linux"
          value="linux"
          name="platform"
          type="radio"
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

উদাহরণের লিঙ্ক: https://codesandbox.io/s/6l6v9p0qkr

প্রথমদিকে, রেডিও বোতামগুলির কোনওটিই নির্বাচিত হয় নি তাই this.stateখালি বস্তু হয় না, তবে যখনই রেডিও বোতামটি নির্বাচন করা হয় তখন ইনপুটটির this.stateনাম এবং এর মান সহ একটি নতুন সম্পত্তি পাওয়া যায়। এরপরে ব্যবহারকারী কোনও রেডিও-বোতাম পছন্দ করেছে কিনা তা যাচাই করতে এটি সহজ হয়:

const isSelected = this.state.platform ? true : false;

সম্পাদনা করুন:

প্রতিক্রিয়া সংস্করণ 16.7-আলফা সঙ্গে সেখানে একটি প্রস্তাব হল কিছু বলা জন্য hooksযা আপনাকে কাপড় সহজ এই ধরনের কাজ করতে দিন হবে:

নীচের উদাহরণে একটি কার্যক্ষম উপাদানটিতে রেডিও-বোতামগুলির দুটি গ্রুপ রয়েছে। তবুও, তারা ইনপুটগুলি নিয়ন্ত্রণ করেছে:

function App() {
  const [platformValue, plaftormInputProps] = useRadioButtons("platform");
  const [genderValue, genderInputProps] = useRadioButtons("gender");
  return (
    <div>
      <form>
        <fieldset>
          Windows
          <input
            value="windows"
            checked={platformValue === "windows"}
            {...plaftormInputProps}
          />
          Mac
          <input
            value="mac"
            checked={platformValue === "mac"}
            {...plaftormInputProps}
          />
          Linux
          <input
            value="linux"
            checked={platformValue === "linux"}
            {...plaftormInputProps}
          />
        </fieldset>
        <fieldset>
          Male
          <input
            value="male"
            checked={genderValue === "male"}
            {...genderInputProps}
          />
          Female
          <input
            value="female"
            checked={genderValue === "female"}
            {...genderInputProps}
          />
        </fieldset>
      </form>
    </div>
  );
}

function useRadioButtons(name) {
  const [value, setState] = useState(null);

  const handleChange = e => {
    setState(e.target.value);
  };

  const inputProps = {
    name,
    type: "radio",
    onChange: handleChange
  };

  return [value, inputProps];
}

কার্যকারী উদাহরণ: https://codesandbox.io/s/6l6v9p0qkr

Answer 4

বোবা উপাদান হিসাবে বেতার উপাদান তৈরি করুন এবং পিতামাতার কাছ থেকে প্রপস পাস করুন।

import React from "react";

const Radiocomponent = ({ value, setGender }) => ( 
  <div onChange={setGender.bind(this)}>
    <input type="radio" value="MALE" name="gender" defaultChecked={value ==="MALE"} /> Male
    <input type="radio" value="FEMALE" name="gender" defaultChecked={value ==="FEMALE"}/> Female
  </div>
);

export default Radiocomponent;

Comments

এটি পরীক্ষা করা সহজ কারণ এটি ডাম্প উপাদানটি একটি খাঁটি ফাংশন।

— খালিদ আজম

Answer 5

এখানে কেবল একটি ধারণা: যখন প্রতিক্রিয়াটির রেডিও ইনপুটগুলির কথা আসে তখন আমি সাধারণত তাদের সকলকে আলাদাভাবে উপস্থাপন করি যা পূর্ববর্তী উত্তরে উল্লিখিত ছিল।

এটি যদি এমন কাউকে সহায়তা করতে পারে যার প্রচুর রেডিও বোতাম রেন্ডার করতে হয়:

import React from "react"
import ReactDOM from "react-dom"

// This Component should obviously be a class if you want it to work ;)

const RadioInputs = (props) => {
  /*
    [[Label, associated value], ...]
  */
  
  const inputs = [["Male", "M"], ["Female", "F"], ["Other", "O"]]
  
  return (
    <div>
      {
        inputs.map(([text, value], i) => (
	  <div key={ i }>
	    <input type="radio"
              checked={ this.state.gender === value } 
	      onChange={ /* You'll need an event function here */ } 
	      value={ value } /> 
    	    { text }
          </div>
        ))
      }
    </div>
  )
}

ReactDOM.render(
  <RadioInputs />,
  document.getElementById("root")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Comments

এটা অসাধারণ. খুব DRY এবং জিনিস সুন্দর করে তোলে। আমি প্রতিটি বিকল্পের জন্য একটি অবজেক্ট ব্যবহার করব, তবে এটি অগ্রাধিকারের বিষয়, আমার ধারণা।

— এনবিখোপ

@ এনবিখোপ যদি আমার এটি আবার লিখতে হয় তবে আমি তার পরিবর্তে অবজেক্টটিও ব্যবহার করতাম! :)

— আরনাউড

এই লাইন চেক করুন: checked={ this.state.gender === value }। কার্যকরী উপাদান নেই this।

— আব্রাহাম হার্নান্দেজ

Answer 6

import React, { Component } from "react";

class RadionButtons extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // gender : "" , // use this one if you don't wanna any default value for gender
      gender: "male" // we are using this state to store the value of the radio button and also use to display the active radio button
    };

    this.handleRadioChange = this.handleRadioChange.bind(this);  // we require access to the state of component so we have to bind our function 
  }

  // this function is called whenever you change the radion button 
  handleRadioChange(event) {
      // set the new value of checked radion button to state using setState function which is async funtion
    this.setState({
      gender: event.target.value
    });
  }


  render() {
    return (
      <div>
        <div check>
          <input
            type="radio"
            value="male" // this is te value which will be picked up after radio button change
            checked={this.state.gender === "male"} // when this is true it show the male radio button in checked 
            onChange={this.handleRadioChange} // whenever it changes from checked to uncheck or via-versa it goes to the handleRadioChange function
          />
          <span
           style={{ marginLeft: "5px" }} // inline style in reactjs 
          >Male</span>
        </div>
        <div check>
          <input
            type="radio"
            value="female"
            checked={this.state.gender === "female"}
            onChange={this.handleRadioChange}
          />
          <span style={{ marginLeft: "5px" }}>Female</span>
        </div>
      </div>
    );
  }
}
export default RadionButtons;

Comments

আপনার কোড কাজ করে তবে আপনার এটিও একটু ব্যাখ্যা করা উচিত

— রাহুল শর্মা

দ্রষ্টব্য : অন চেঞ্জ হ্যান্ডলারে প্রতিরোধের ডিফল্টটি ব্যবহার করবেন না কারণ এটি

— ডিওএম

Answer 7

একটি রেডিও বোতাম ক্লিক করে এমন একটি ইভেন্ট ট্রিগার করা উচিত যা হয়:

1. সেট স্টেটকে কল করে, আপনি যদি কেবলমাত্র নির্বাচনের জ্ঞান স্থানীয় হতে চান, বা
2. উপরে থেকে পাস করা কলব্যাক কল করে self.props.selectionChanged(...)

প্রথম ক্ষেত্রে, পরিবর্তনটি রাষ্ট্রটি পুনরায় রেন্ডার শুরু করে এবং আপনি এটি করতে পারেন
<td>chosen site name {this.state.chosenSiteName} </td>

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

Answer 8

চিনক্যাংকে গড়ে তুলতে তার উত্তরের জন্য বলেছিলেন, আগ্রহীদের জন্য আমার আরও শুকনো পদ্ধতি এবং এসআইএল রয়েছে:

class RadioExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedRadio: 'public'
    };
  }

  handleRadioChange = (event) => {
    this.setState({
      selectedRadio: event.currentTarget.value
    })
  };

  render() {
    return (
      <div className="radio-row">
        <div className="input-row">
          <input
            type="radio"
            name="public"
            value="public"
            checked={this.state.selectedRadio === 'public'}
            onChange={this.handleRadioChange}
          />
          <label htmlFor="public">Public</label>
        </div>
        <div className="input-row">
          <input
            type="radio"
            name="private"
            value="private"
            checked={this.state.selectedRadio === 'private'}
            onChange={this.handleRadioChange}
          />
          <label htmlFor="private">Private</label>
        </div>
      </div>
    )
  }
}

এটি বাদে একটিতে একটি ডিফল্ট চেক মান হয়।

Answer 9

আমি রেডিও, চেকবক্স বাস্তবায়নেও বিভ্রান্ত হয়ে পড়েছিলাম। আমাদের যা দরকার তা হ'ল রেডিওর ইভেন্টের পরিবর্তন শোনো, এবং তারপরে রাষ্ট্রটি সেট করুন। আমি লিঙ্গ নির্বাচনের ছোট উদাহরণ তৈরি করেছি।

/*
 * A simple React component
 */
class App extends React.Component {
  constructor(params) {
     super(params) 
     // initial gender state set from props
     this.state = {
       gender: this.props.gender
     }
     this.setGender = this.setGender.bind(this)
  }
  
  setGender(e) {
    this.setState({
      gender: e.target.value
    })
  }
  
  render() {
    const {gender} = this.state
    return  <div>
        Gender:
        <div>
          <input type="radio" checked={gender == "male"} 
onClick={this.setGender} value="male" /> Male
          <input type="radio" checked={gender == "female"} 
onClick={this.setGender} value="female"  /> Female
        </div>
        { "Select Gender: " } {gender}
      </div>;
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<App gender="male" />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 10

বুটস্ট্র্যাপ বলছি, আমরা এটি এর মতো করি:

export default function RadioButton({ onChange, option }) {
    const handleChange = event => {
        onChange(event.target.value)
    }

    return (
        <>
            <div className="custom-control custom-radio">
                <input
                    type="radio"
                    id={ option.option }
                    name="customRadio"
                    className="custom-control-input"
                    onChange={ handleChange }
                    value = { option.id }
                    />
                    <label
                        className="custom-control-label"
                        htmlFor={ option.option }
                        >
                        { option.option }
                    </label>
            </div>
        </>
    )
}