ReactJS में रेडियो बटन का उपयोग कैसे करें?

Question

मैं ReactJS में नया हूँ, अगर यह लगता है तो क्षमा करें। मेरे पास एक घटक है जो प्राप्त आंकड़ों के अनुसार कई तालिका पंक्तियां बनाता है।

कॉलम के भीतर प्रत्येक सेल में एक रेडियो चेकबॉक्स होता है। इसलिए उपयोगकर्ता मौजूदा पंक्तियों में से 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समारोह । यह @FakeRainBrigand, अच्छी पकड़ द्वारा संपादित किया गया था! इसके बिना आपके thisमैप फंक्शन का windowstate

— जिक्र

thisयदि आप नियमित फ़ंक्शन के बजाय ES6 तीर का उपयोग करते हैं तो यह चाल अनावश्यक है। उदा: var resultRows = this.props.data.map((result) => { ... });मैं केवल इसका उल्लेख करता हूं क्योंकि रिएक्ट-र्स आम तौर पर पहले से ही ट्रांसप्लिकेशन (JSX के लिए) के कुछ रूप का उपयोग कर रहे हैं, इसलिए ES6 आमतौर पर आसान पहुंच के भीतर है।

— टॉम

रेडियो बटन के मूल्यों को प्राप्त करने के लिए दो कार्यों का उपयोग अस्पष्ट और अनावश्यक प्रतीत होता है। आप बस एक फ़ंक्शन को परिभाषित कर सकते हैं, शायद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प्रॉप है। वे दोनों एक div में लिपटे हुए हैं, जिसके पास onChangeइस उत्तर में वर्णित हैंडलर है। मैं पहले रेडियो पर क्लिक करता हूं, एक घटना निकाल दी जाती है। मैं दूसरा रेडियो क्लिक करता हूं, एक घटना निकाल दी जाती है। तीसरी बार और उसके बाद, कोई घटना नहीं हुई है। क्यों?

— स्क्लरर

@साहित्यन I में सभी रेडियो से जुड़ा एक ही नाम विशेषता था। मुझे पता चला कि मुझे ऑन-लाइन हैंडलर के बजाय रेडियो इनपुट पर एक ऑनक्लियर हैंडलर लगाने की आवश्यकता है। यही चाल चली।

— सकुर्लर

मैं @Sururler से सहमत हूं - ऑनकांगे के साथ, हैंडल केवल एक रेडियो बटन के लिए एक बार फायर करता है जो डिव के तहत शामिल हैं। OnClick के साथ, यह कई बार काम करता है। यकीन नहीं होता कि आपकी स्निपेट से तुलना क्यों की जाती है ...

— JESii

Answer 3

रिएक्ट डॉक्स के आधार पर :

एकाधिक इनपुट को संभालना। जब आपको कई नियंत्रित इनपुट तत्वों को संभालने की आवश्यकता होती है, तो आप प्रत्येक तत्व में एक नाम विशेषता जोड़ सकते हैं और हैंडलर फ़ंक्शन को चुन सकते हैं कि event.target.name के मूल्य के आधार पर क्या करना है।

उदाहरण के लिए:

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 और चीजों को अच्छा बनाता है। मैं प्रत्येक विकल्प के लिए एक ऑब्जेक्ट का उपयोग करूंगा, लेकिन यह वरीयता की बात है, मुझे लगता है।

— nbkhope

@nbkhope अगर मुझे इसे फिर से लिखना पड़ा, तो मैं इसके बजाय ऑब्जेक्ट का उपयोग करूँगा! :)

— अरनौद

इस लाइन की जाँच करें: 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

आपका कोड काम करता है लेकिन आपको इसे थोड़ा समझाना भी चाहिए

— राहुल शर्मा

नोट : न उपयोग preventDefault onChange हैंडलर में है क्योंकि यह सेटिंग रोकता जाँच डोम घटक को

— AlexNikonov

Answer 7

एक रेडियो बटन पर क्लिक करने से किसी घटना को ट्रिगर किया जाना चाहिए:

1. कॉल सेटस्टैट, यदि आप केवल चयन ज्ञान को स्थानीय बनाना चाहते हैं, या
2. एक कॉलबैक है जिसे ऊपर से पास किया गया है self.props.selectionChanged(...)

पहले मामले में, परिवर्तन राज्य है एक पुन: रेंडर को ट्रिगर करेगा और आप कर सकते हैं
<td>chosen site name {this.state.chosenSiteName} </td>

दूसरे मामले में, कॉलबैक का स्रोत यह सुनिश्चित करने के लिए चीजों को अपडेट करेगा कि लाइन के नीचे, आपके SearchResult के उदाहरण में चुना जाएगाSameName और चुना गया है जो इसमें सेट है।

Answer 8

चिनकांग ने अपने जवाब के लिए कहा, मेरे पास अधिक शुष्क दृष्टिकोण है और रुचि रखने वालों के लिए es6 में:

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>
        </>
    )
}