ReactJS'de radyo düğmeleri nasıl kullanılır?

ReactJS'de yeniyim, eğer bu ses çıkarsa üzgünüm. Alınan verilere göre birkaç tablo satırı oluşturan bir bileşen var.

Sütundaki her hücrenin bir radyo onay kutusu vardır. Böylece kullanıcı mevcut satırlardan birini site_nameve birini seçebilir address. Seçim altbilgide gösterilecektir. Ve bu benim sıkıştığım yer.

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()bir radyo onay kutusu türü seçimi almak ve ilk altbilgi hücresine eklemek gibi bir şey yapabilirdi .

Ama kesinlikle tamamen eksik olduğum bir Reactjs yolu olmalı? Çok teşekkürler

Oluşturma işleminde yapılacak herhangi bir değişiklik stateveya props( tepki belgesi ) aracılığıyla değiştirilmelidir .

Bu yüzden burada girdinin olayını kaydediyorum ve ardından değiştirmeyi statealtbilgide gösterilecek şekilde tetikleyeceğim.

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

İşte tepki js radyo düğmeleri uygulamak için en basit yolu.

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>

Düzenlenen

Bağlama yerine ok işlevini kullanabilirsiniz. Yukarıdaki kodu aşağıdaki gibi değiştirin

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

Varsayılan değer kullanımı için defaultChecked, bunun gibi

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

React Docs'un söylediklerine dayanarak :

Birden Çok Girişi İşleme. Birden fazla denetimli giriş öğesini işlemeniz gerektiğinde, her öğeye bir ad niteliği ekleyebilir ve işleyicinin event.target.name değerine göre ne yapılacağını seçmesine izin verebilirsiniz.

Örneğin:

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

Örneğe bağlantı: https://codesandbox.io/s/6l6v9p0qkr

İlk başta, radyo düğmelerinin hiçbiri seçilmez, bu nedenle this.stateboş bir nesnedir, ancak radyo düğmesi seçildiğinde this.stategirişin adı ve değeri ile yeni bir özellik alır. Daha sonra kullanıcının aşağıdaki gibi herhangi bir radyo düğmesini seçip seçmediğini kontrol etmeyi kolaylaştırır:

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

DÜZENLE:

React 16.7-alfa sürümünde ,hooks bu tür şeyleri daha kolay yapmanıza izin verecek bir şey için bir teklif var :

Aşağıdaki örnekte, işlevsel bir bileşende iki grup radyo düğmesi bulunmaktadır. Yine de kontrollü girişleri var:

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];
}

Çalışma örneği: https://codesandbox.io/s/6l6v9p0qkr

Radyo bileşenini aptal bileşen olarak yapın ve destekleri ebeveynin yanından geçirin.

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;

Burada sadece bir fikir: React'teki radyo girişleri söz konusu olduğunda, genellikle hepsini önceki yanıtlarda belirtilen farklı bir şekilde işlerim.

Bu, bol miktarda radyo düğmesi oluşturması gereken herkese yardımcı olabilirse:

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>

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;

Bir radyo düğmesine tıklamak aşağıdakilerden biri olan bir olayı tetiklemelidir:

1. yalnızca seçim bilgisinin yerel olmasını istiyorsanız setState'i çağırır veya
2. yukarıdan geçmiş bir geri aramayı çağırır self.props.selectionChanged(...)

İlk durumda, değişiklik durumunun yeniden oluşturmayı tetikleyeceği ve
<td>chosen site name {this.state.chosenSiteName} </td>

ikinci durumda, geri aramanın kaynağı satırın altında, SearchResult örneğinizinSiteName'i ve sahne alanında ayarlanmışAddress'i seçtiğinden emin olmak için bir şeyler güncelleyecektir.

ChinKang'ın cevabı üzerine inşa etmek için, daha kuru bir yaklaşımım var ve ilgilenenler için es6'da:

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

bunun dışında varsayılan olarak işaretlenmiş bir değer olacaktır.

Radyo, onay kutusu uygulamasında da kafam karıştı. İhtiyacımız olan şey, radyonun değişim olayını dinleyin ve ardından durumu ayarlayın. Cinsiyet seçimine küçük bir örnek verdim.

/*
 * 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>

Bootstrap çocuklar, bunu böyle yapıyoruz:

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