javascript - 如何在反应中获取输入单选按钮的值？

Question

  state = {
    value1: "YES",
    value2: "NO",
    selectedRadioInput: "",
  };
  handleChange = (e) => {
    this.setState({ selectedRadioInput: e.target.value });
  }
        <div className="toggle_radio">
          <input
            type="radio"
            value={this.state.value1}
            onChange={this.handleChange}
            className="toggle_option"
            id="first_toggle"
            name="toggle_option"
          />
          <input
            type="radio"
            value={this.state.value2}
            checked
            onChange={this.handleChange}
            className="toggle_option"
            id="second_toggle"
            name="toggle_option"
          />
          <label htmlFor="first_toggle">
            <p>YES</p>
          </label>
          <label htmlFor="second_toggle">
            <p>NO</p>
          </label>
          <div className="toggle_option_slider"></div>
          <h2>{this.state.selectedRadioInput}</h2>
        </div>
      </div>

我有以下单选输入按钮，加载时第二个按钮被选中..我希望能够获得我选择的单选按钮的值..请帮助

标签： javascriptreactjs

Answer 1

输入元素应该是react中的受控组件，这意味着输入元素的值将由react控制。对于受控组件，输入元素的值由反应状态驱动。

这样，您可以轻松地从组件的状态中读取无线电输入的值。

以下代码片段显示了所选无线电输入的值。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      value1: 'First Radio Button Value',
      value2: 'Second Radio Button Value',
      selectedRadioInput: '' 
    };
  }

  handleChange = (e) => {
    this.setState({ selectedRadioInput: e.target.value });
  }

  render() {
    return (
      <div>
        <input
            type="radio"
            value={this.state.value1}
            onChange={this.handleChange}
            className="toggle_option"
            id="first-toggle"
            name="toggle_option"
          />
          <span>Radio Button 1</span>
          <br/>
          <input
            type="radio"
            value={this.state.value2}
            onChange={this.handleChange}
            className="toggle_option"
            id="second_toggle"
            name="toggle_option"
          />
          <span>Radio Button 2</span>
          <h2>{this.state.selectedRadioInput}</h2>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

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

这是带有功能组件而不是基于类的组件的相同代码片段

function App() {
  const [data, setData] = React.useState({
    value1: 'First Radio Button Value',
    value2: 'Second Radio Button Value',
    selectedRadioInput: '' 
  });

  const handleChange = (e) => {
    setData({ ...data, selectedRadioInput: e.target.value });
  }

  return (
      <div>
        <input
            type="radio"
            value={data.value1}
            onChange={handleChange}
            className="toggle_option"
            id="first-toggle"
            name="toggle_option"
          />
          <span>Radio Button 1</span>
          <br/>
          <input
            type="radio"
            value={data.value2}
            onChange={handleChange}
            className="toggle_option"
            id="second_toggle"
            name="toggle_option"
          />
          <span>Radio Button 2</span>
          <h2>{data.selectedRadioInput}</h2>
      </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

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

<div id="root"></div>