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

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

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

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

uj5u.com熱心網友回復：

在反應中，函式 onChangeValue() 與 div 相關聯，因此只要用戶選擇任何單選按鈕，它就會反映在函式中。

當用戶完成選擇后，他們可能想要提交表單。提交方法稱為 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'));

 

uj5u.com熱心網友回復：

像這樣嘗試

保持這樣的處理函式

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

uj5u.com熱心網友回復：

onChange向父元素添加一個處理程式，并在該函式中從被單擊的元素中獲取 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>

標籤：javascript html 反应

上一篇：如何在ReactJS中處理組單選按鈕-功能組件

下一篇：反應動態地將組件插入兩行之間的表中