Question

我正在构建一个React组件。这是带有单选按钮的表单，只能将其设置为True，然后不能再设置为false。我希望能够打开和关闭它。而且因为值得一读。
相应的代码是什么样的？目前，我知道了：

import React, { Component } from 'react';

class Form extends Component {
art = {
selected: "uppper"
}
 onChange() {
console.log("Click")
 }
render() {
 return (
  <form onSubmit={this.handleFormSubmit}>
    <div>
      <label>
        <input type="radio" value="option1"
        onClick={this.onChange} />
        option1
      </label>
    </div>  
    <input type="submit" value="Submit" />
   </form>
   );
  }
 } 
export default Form;

Answer 1

在与使用类组件保持一致的同时，您的代码将如下所示：

class Form extends Component {
  state = {
    selected: false
  };
  onChange = () => {
    this.setState({
      selected: !this.state.selected
    });
  };
  render() {
    return (
      <form onSubmit={this.handleFormSubmit}>
        <div>
          <label>
            <input
              type="radio"
              value="option1"
              onClick={this.onChange}
              checked={this.state.selected}
            />
            option1
          </label>
        </div>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
export default Form;

基本上，您需要做的三件事。

您处于状态的用于跟踪按钮的布尔值是点击（是或否）。
为输入提供一个选中属性，该属性与选择状态。
更新onChange处理程序以切换状态值。同时确保 onChange处理程序通过使用绑定到执行上下文箭头功能或绑定this关键字。

查看有效的沙箱：https://codesandbox.io/s/mystifying-borg-gwl2q

Answer 2

这是您可以执行的操作：

import React, { useState } from 'react';
import { render } from 'react-dom';

const App = () => { 
  const [radioState, setRadioState] = useState(false);

  const handleChange = () => { 
    setRadioState(!radioState)
  }

  return (
    <input type="radio" checked={radioState} onClick={handleChange}/>
  )
}

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

实时示例here。

如何使用react.js处理单选按钮

2 个答案: