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

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;

基本上您需要的是三件事。

1. 您所在州用于跟踪按钮的 bool 值是单击(正确或错误)。
2. 为输入提供一个与值相匹配的已检查属性选定状态。
3. 更新 onChange 处理程序以切换状态值。还要保证onChange 处理程序通过使用绑定(bind)到执行上下文箭头函数或绑定(bind) this 关键字。

查看工作沙箱:https://codesandbox.io/s/mystifying-borg-gwl2q