React.js中如何处理布尔值实现商品可议价状态设置

方案1：使用下拉选择框（保持原有组件类型） #

针对你当前用下拉框实现的需求，需要明确选项值并处理字符串与布尔值的转换：

1.1 修复下拉框代码 #

<label>是否可议价:</label>
<select
  name='isOfferable'
  value={String(values.isOfferable)} // 将布尔值转为字符串匹配选项值
  onChange={(e) => {
    // 手动将选项的字符串值转回布尔值
    handleChange({
      target: {
        name: e.target.name,
        value: e.target.value === 'true'
      }
    });
  }}
>
  <option value="false">不可议价</option>
  <option value="true">可议价</option>
</select>
{errors.isOfferable && touched.isOfferable && (
  <div>{errors.isOfferable}</div>
)}

1.2 修正Axios提交参数 #

你当前的请求将values嵌套在对象中，后端会收到{values: {...}}而非直接的表单数据，需调整为：

axios({
  method: "post",
  url: "http://localhost:64082/api/products/add",
  data: values // 直接传递表单值，无需嵌套
});

方案2：使用复选框（更符合布尔值交互习惯） #

如果觉得下拉框不够直观，改用复选框更适配布尔值选择场景：

<label>
  <input
    type="checkbox"
    name='isOfferable'
    checked={values.isOfferable}
    onChange={handleChange}
  />
  允许议价
</label>
{errors.isOfferable && touched.isOfferable && (
  <div>{errors.isOfferable}</div>
)}

Formik会自动处理复选框的布尔值状态，无需额外转换逻辑。

额外注意事项 #

• 确保ProductAddSchema中对isOfferable的验证规则正确（比如必填项校验）
• 后端ASP.NET Core的接收模型中，isOfferable字段需定义为bool类型，以自动解析前端传来的布尔值
• 补充initialValues中的usingStatusId字段（当前代码中下拉框使用了该name但未初始化）

内容的提问来源于stack exchange，提问作者NewPartizal