警告：您在没有 `onChange` 处理程序的情况下向表单字段提供了 `checked` 道具

Question

我的 JS React Bootstrap 代码收到此警告。

Warning: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.

我的代码完全按预期工作，因此警告不会导致任何功能问题，但我仍然想解决它。

这是导致警告的代码：

<View style={{flexDirection: "row"}}>
  <View style={{flex: 1}}>
    <Form.Group>
      <Form.Label>Availability</Form.Label>
      <div onChange={ (e) => this.handleInput(e, "listing")}>
        <Form.Check checked={(this.state.listing.availability === "募集中")} type="radio" value="募集中" name="availability" label="募集中"/>
        <Form.Check checked={(this.state.listing.availability === "契約済")} type="radio" value="契約済" name="availability" label="契約済"/>
      </div>
    </Form.Group>
  </View>
  <View style={{flex: 1.1}}>
    <Form.Group>
      <Form.Label>Property Type</Form.Label>
      <div onChange={ (e) => this.handleInput(e, "property")}>
        <Form.Check checked={(this.state.property.property_type === "一戸建て")} type="radio" value="一戸建て" name="property_type" label="一戸建て"/>
        <Form.Check checked={(this.state.property.property_type === "アパート")} type="radio" value="アパート" name="property_type" label="アパート"/>
      </div>
    </Form.Group>
  </View>
  <View style={{flex: 0.9}}>
    <Form.Group>
      <Form.Label>Interest</Form.Label>
      <div onChange={ (e) => this.handleInput(e, "property")}>
        <Form.Check checked={(this.state.property.interest === "Extremely")} type="radio" value="Extremely" name="interest" label="Extremely"/>
        <Form.Check checked={(this.state.property.interest === "Kinda")} type="radio" value="Kinda" name="interest" label="Kinda"/>
        <Form.Check checked={(this.state.property.interest === "Nah")} type="radio" value="Nah" name="interest" label="Nah"/>
      </div>
    </Form.Group>
  </View>
 </View>

我有一定的理由以这种方式格式化内容，但我完全愿意接受建议。真的，我只是想通过尽可能少地更改此代码来消除警告。

我看到还有其他问题可以解决这个问题，但我找不到适用于我的代码的解决方案。

Answer 1

警告信息看起来很清楚。如果你想让它消失，那么你应该将 readOnly 属性添加到 Form.Check 组件。

<Form.Check checked={(this.state.listing.availability === "募集中")} type="radio" value="募集中" name="availability" label="募集中" readOnly/>

警告：您在没有 `onChange` 处理程序的情况下向表单字段提供了 `checked` 道具

Warning: You provided a `checked` prop to a form field without an `onChange` handler

javascript

reactjs

checkbox

warnings