警告：您在沒有 `onChange` 處理程序的情況下為表單字段提供了 `checked` 屬性

Question

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

警告：您在沒有onChange處理程序的情況下向表單字段提供了checked的道具。 這將呈現一個只讀字段。 如果該字段應該是可變的，請使用defaultChecked 。 否則，設置onChange或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/>