reactjs - 单选按钮不起作用

Question

我已经创建了一个 radio 组件，但是当点击它时它没有显示选中这是代码

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 包含一个类型为 radio 的输入，同时带有 checked 和 defaultChecked 属性。输入元素必须是受控或不受控的(指定 checked prop 或 defaultChecked prop，但不能同时指定两者)。在使用受控或不受控输入元素之间做出决定，并删除这些 Prop 之一

谁能帮我解决这个问题？

Answer 1

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

---

受控组件

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

An input form element whose value is controlled by React in this way is called a "controlled component".

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

这是一个简单的例子:

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 以“传统方式”直接管理。

In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

创建不受控制的组件很容易:

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 Prop (取决于输入类型)，如我上面所演示的。

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

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

这就是您所做的混合。您在这里同时使用了 defaultValue 和 checked。因此警告:

Warning: RadioButton contains an input of type radio with both checked and defaultChecked props. Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.

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