ReactJS에서 라디오 버튼을 사용하는 방법?

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()하나의 라디오 확인란 유형을 선택하여 첫 번째 바닥 글 셀에 삽입하는 것과 같은 작업을 수행 할 수 있습니다.

그러나 반드시 완전히 누락 된 Reactjs 방식이 있어야합니까? 많은 감사

렌더링에 대한 모든 변경 사항은 state또는 props( react doc )을 통해 변경해야합니다 .

여기에 입력 이벤트를 등록한 다음을 변경 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

반응 js에서 라디오 버튼을 구현하는 가장 간단한 방법은 다음과 같습니다.

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

React Docs의 말을 바탕으로 :

다중 입력 처리. 여러 개의 제어 된 입력 요소를 처리해야하는 경우 각 요소에 이름 속성을 추가하고 핸들러 함수가 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

라디오 구성 요소를 바보 구성 요소로 만들고 소품을 부모로부터 전달하십시오.

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;

여기에 아이디어가 있습니다 : React의 라디오 입력과 관련하여 나는 보통 이전 답변에서 언급 한 것과 다른 방식으로 모든 것을 렌더링합니다.

이것이 많은 라디오 버튼을 렌더링 해야하는 사람에게 도움이된다면 :

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;

라디오 버튼을 클릭하면 다음 중 하나의 이벤트가 트리거됩니다.

1. 선택 지식 만 로컬로 설정하려는 경우 setState를 호출하거나
2. 위에서 전달 된 콜백을 호출합니다. self.props.selectionChanged(...)

첫 번째 경우, 변경 상태는 다시 렌더링을 트리거하고 수행 할 수 있습니다
<td>chosen site name {this.state.chosenSiteName} </td>

두 번째 경우 콜백 소스는 항목을 업데이트하여 SearchDown 인스턴스가 props에 selectedSiteName 및 selectedAddress를 설정하도록합니다.

ChinKang을 기반으로 그의 대답에 따르면, 나는 더 건조한 접근 방식과 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>
    )
  }
}

이것을 제외하고는 기본값으로 확인 된 값이 있습니다.

라디오, 확인란 구현에 혼란스러워했습니다. 우리가 필요한 것은 라디오의 변경 이벤트를 듣고 상태를 설정하는 것입니다. 나는 성별 선택의 작은 예를 만들었습니다.

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

부트 스트랩 녀석, 우리는 다음과 같이합니다 :

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