如何使用 MongoDB 使单选按钮自动签入编辑页面？答案

【问题标题】：How to make radio button auto check in edit page using MongoDB?如何使用 MongoDB 使单选按钮自动签入编辑页面？
【发布时间】：2019-12-20 17:33:39
【问题描述】：

我有 2 个页面，第一个是添加页面，第二个是编辑页面。在添加页面中，我有一个收音机button for gender，并将信息存储在MongoDB 中。在编辑页面中，我尝试使单选按钮自动选中，但它不起作用。这是我的编辑页面代码：

const gender = document.querySelector('input[name = gender]:checked').value;

e.preventDefault();

Meteor.call(
  'employee.update',
  this.props.match.params.id,
  gender
);
return alert("Employee Information Has Been Updated!");
}



renderEmployeeEdit() {
  return this.state.employees.map(employee => {
    return (
      <div key={employee._id}>
        <form onSubmit={this.onSubmit.bind(this)}>
          <input type="radio" name="gender" value="Male"/>Male <br/>
          <input type="radio" name="gender" value="Female"/>Female
        </form>
      </div>
    );
  });
}

【问题讨论】：

使用 defaultChecked 属性，该属性可用于单选按钮和复选框，而不是选中。这是例如。 stackoverflow.com/a/47027003/5995973

标签： javascript reactjs mongodb meteor

【解决方案1】：

您可以使用 formcontrolname 并且可以在组件 ts 文件中的表单中定义它，并且当表单对象填充了所选记录的值时，您应该从单选按钮中删除 checkc 在编辑时它将显示为选中，无论哪个为真

<div class="form-group row">
      <label class="col-md-4 col-form-label">Is Taxable</label>
      <div class="col-md-8">
        <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" class="custom-control-input" id="isTaxableYes" formControlName="isTaxable" [value]="true">
          <label class="custom-control-label" for="isTaxableYes">Yes</label>
        </div>

        <!-- Default checked -->
        <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" class="custom-control-input" id="isTaxableNo" formControlName="isTaxable" [value]="false">
          <label class="custom-control-label" for="isTaxableNo">No</label>
        </div>
      </div>
    </div>

【讨论】：

【解决方案2】：

使用 defaultChecked 属性，可用于<input type="radio">

【讨论】：

我做了，但还是一样。如果我在进入编辑页面时添加为女性，而我使用 defaultChecked 它没有选择女性作为默认值