单选按钮不起作用

Question

我创建了一个无线电组件，但单击它时未显示已选中 这是代码

import React from 'react';
import classnames from 'classnames';

const RadioButton = (field) => {

  const inputClasses = classnames('form-group  has-feedback  ',{
    'has-error': field.meta.touched && field.meta.error,
  });
  return(
    <div className={inputClasses}>
        <label className="radio-inline custom-radio nowrap">
        <input
          disabled={field.disabled}
          type="radio"
          name={field.input.name}
          value={field.input.value}
          defaultChecked={field.defaultChecked}
          {...field.input}
        />
        <span>{field.label}</span>
      </label>
    </div>
  );
};

export default RadioButton;

这里是字段：

                      <Field
                        label="True"
                        component={RadioButton}
                        name="True"
                        type="radio"
                        value={true}
                       defaultChecked={ true }
                      />
                      <Field
                        label="False"
                        component={RadioButton}
                        name="False"
                        type="radio"
                        value={false}
                        defaultChecked={ false }
                      />

这是我在控制台上收到的警告： 警告：RadioButton 包含一个带有选中和 defaultChecked 属性的 radio 类型的输入。输入元素必须是受控或不受控的（指定选中的道具或 defaultChecked 道具，但不能同时指定两者）。决定使用受控或不受控的输入元素并删除这些道具之一

谁能帮我解决这个问题？

Answer 1

您应该查看官方文档，特别是有关Controlled Components 和Uncontrolled Components 的部分。

---

受控组件

基本上，使用受控组件，您可以让 React 管理所述元素的值。

一个输入表单元素，其值由 React 以这种方式控制，称为“受控组件”。

要创建受控组件，您需要一个存储其值的状态变量，以及一个根据某些事件（点击、输入等）改变其值的函数。

这是一个简单的例子：

class ControlledComponentDemo extends React.Component {
  constructor() {
    super();
    this.state = {
      input: "",
      radio: null,
      checkbox: []      
    };
  }
  
  changeInput = (e) => {
    this.setState({input: e.target.value});
  }
  
  changeRadio = (id) => {
    this.setState({radio: id});
  }
  
  changeCheckbox = (id) => {
    let arr = this.state.checkbox.slice();
    if(arr.indexOf(id) >= 0) {
      arr.splice(arr.indexOf(id), 1);
    } else {
      arr.push(id);
    }
    this.setState({checkbox: arr});
  }
  
  render() {
    return(
      <form>
        <input type="text" value={this.state.input} onChange={this.changeInput} />
        <br /><br />
        <input type="radio" name="myRadio" checked={this.state.radio === 0} onChange={this.changeRadio.bind(this, 0)} />
        <input type="radio" name="myRadio" checked={this.state.radio === 1} onChange={this.changeRadio.bind(this, 1)} />
        <br /><br />
        <input type="checkbox" name="myCheckbox" checked={this.state.checkbox.indexOf(0) >= 0} onChange={this.changeCheckbox.bind(this, 0)} />
        <input type="checkbox" name="myCheckbox" checked={this.state.checkbox.indexOf(1) >= 0} onChange={this.changeCheckbox.bind(this, 1)} />
      </form>
    );
  }
}

ReactDOM.render(<ControlledComponentDemo />, document.getElementById("app"));

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

---

不受控制的组件

顾名思义，在不受控制的组件中，React 不管理表单元素的值。相反，这些是由 DOM 直接以“传统方式”管理的。

在受控组件中，表单数据由 React 组件处理。另一种方法是不受控制的组件，其中表单数据由 DOM 本身处理。

创建一个不受控制的组件很容易：

class UncontrolledComponentDemo extends React.Component {
  render() {
    return(
      <form>
        <input type="text" />
        <br /><br />
        <input type="radio" name="myRadio" />
        <input type="radio" name="myRadio" />
        <br /><br />
        <input type="checkbox" name="myCheckbox" />
        <input type="checkbox" name="myCheckbox" />        
      </form>
    );
  }
}

ReactDOM.render(<UncontrolledComponentDemo />, document.getElementById("app"));

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

---

您的代码的问题在于您有受控和不受控组件的混合语法。

在受控组件中，值在状态中定义并传递到value 或checked 道具（取决于输入类型），如我上面演示的那样。

由于不受控制的组件不受状态管理，我们也不应该将任何东西传递给value 或checked 属性。这样做没有意义，因为 DOM 会自行管理。

我们可以做的是告诉 DOM 元素的初始值。例如，文本输入可能已经输入了某些内容，或者已经选中了复选框。我们使用 defaultValue 属性来做到这一点。

这就是你所做的混淆。您在这里同时使用defaultValue 和checked。因此警告：

警告：RadioButton 包含带有选中和 defaultChecked 属性的 radio 类型的输入。输入元素必须是受控或不受控的（指定选中的道具或 defaultChecked 道具，但不能同时指定两者）。在使用受控或不受控的输入元素之间做出决定并删除这些道具之一。

我还应该提到，受控组件是 React 推荐的组件。您仍然应该阅读我上面链接的文档部分。

Answer 2

请使用这个！

效果很好！

            <label>
                <input type="radio" defaultChecked={true} disabled={false} value={YOUR_Value} />
                {this.state.content}
            </label>