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包含带有checked和defaultChecked道具的radio类型的输入。输入元素必须是受控的或不受控制的（指定已检查的prop，或defaultChecked prop，但不能同时指定两者）。决定使用受控或不受控制的输入元素并删除其中一个道具

任何人都可以帮我解决这个问题吗？

Answer 1

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

受控组件

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

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

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

这是一个简单的例子：

＆＃13;

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"));

＆＃13;

<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>

＆＃13;

不受控制的组件

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

在受控组件中，表单数据由React组件处理。替代方案是不受控制的组件，其中表单数据由DOM本身处理。

创建一个不受控制的组件很简单：

＆＃13;

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"));

＆＃13;

<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>

＆＃13;

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

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

由于不受控制的组件不受国家管理，我们也不应该将任何内容传递给value或checked道具。这样做是没有意义的，因为DOM自己管理它。

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

执行此操作

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

警告：RadioButton包含带有checked和defaultChecked道具的radio类型的输入。输入元素必须是受控的或不受控制的（指定已检查的prop，或defaultChecked prop，但不能同时指定两者）。决定使用受控或不受控制的输入元素并删除其中一个道具。

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

Answer 2

请用这个！

它完美运作！

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

单选按钮不起作用

2 个答案:

受控组件

不受控制的组件