如何在 React 中獲取選中的單選按鈕？

Question

我正在尋找一種從一組單選按鈕中獲取選定按鈕的方法。

例如，它如何在這樣的代碼中工作？

<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>

Answer 1

在反應中，function onChangeValue() 與 div 相連，因此一旦用戶選擇任何單選按鈕，它將反映在 function 中。

當用戶完成選擇后，他們可能想要提交表單。 提交方法稱為 formSubmit()。

 /*
 * 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'));

 

Answer 2

像這樣試試

像這樣保留一個處理程序 function

const handleChange = (e) => {
    const { name, value } = e.target;
    alert(`${name} : ${value}`);
  };

並附加為onChange處理程序。

<input
   type="radio"
   id="html"
   name="fav_language"
   value="HTML"
   onChange={handleChange}
/>

代碼沙箱 =>https://codesandbox.io/s/distracted-moon-xi1co?file=/src/App.js

Answer 3

將onChange處理程序添加到父元素，並在該 function 中，從單擊的元素中獲取 id。 根據您的要求，您可能希望將該 ID 存儲在 state 中。

注意我必須修復你的 HTML 因為input和br元素缺少它們的結束標簽。

 const { Component } = React; class Example extends Component { constructor() { super(); this.state = { selected: '' }; } // Destructure the id from the clicked element // and set the state with it handleChange = (e) => { const { id } = e.target; this.setState({ selected: id }, () => { console.log(this.state.selected); }); } // Add handleChange as the handler for // the onChange listener render() { return ( <div onChange={this.handleChange}> <input type="radio" id="html" name="fav_language" value="HTML" /> <label for="html">HTML</label><br/> <input type="radio" id="css" name="fav_language" value="CSS" /> <label for="css">CSS</label><br/> <input type="radio" id="javascript" name="fav_language" value="JavaScript" /> <label for="javascript">JavaScript</label> </div> ); } }; ReactDOM.render( <Example />, document.getElementById('react') );

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

和一個功能組件版本。

 const { useEffect, useState } = React; function Example() { const [ selected, setSelected ] = useState(''); // Destructure the id from the clicked element // and set the state with it function handleChange(e) { const { id } = e.target; setSelected(id); } // Log the state after its been updated useEffect(() => { if (selected) console.log(selected); }, [selected]); // Add handleChange as the handler for // the onChange listener return ( <div onChange={handleChange}> <input type="radio" id="html" name="fav_language" value="HTML" /> <label for="html">HTML</label><br/> <input type="radio" id="css" name="fav_language" value="CSS" /> <label for="css">CSS</label><br/> <input type="radio" id="javascript" name="fav_language" value="JavaScript" /> <label for="javascript">JavaScript</label> </div> ); }; ReactDOM.render( <Example />, document.getElementById('react') );

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