1
function Form(props) {
  var objBarCode;
  if (props.record && props.record.type === "STOCK") {
    objBarCode = < TextInput source="barcode" label="Bar Code" / >;
  }
  return (
    < SimpleForm {...props} >
      < TextInput source="item" label="item" validate={[required]} / >
      < TextInput source="name" label="Name" validate={[required]} / >
      < SelectInput
        source="type"
        label="Type"
        validate={[required]}
        choices={[
          { id: "STOCK", name: "Stock" },
          { id: "RMK", name: "Remark" },
          { id: "SVR", name: "Services" }
        ]}
      / >
      {objBarCode}
    < /SimpleForm >
  );
}

在某些输入仅在某些条件下出现的情况下,我怎样才能实现这样的目标?当条件值改变时,上面的代码不会重新渲染。目标是让 Textinput Bar Code 仅在type="STOCK"

4

1 回答 1

3

这并不容易。您必须实现一个自定义输入,它将从 redux 表单状态获取条件的当前值并决定相应地显示什么。

我建议您将其创建为包装器或 HOC,以便您可以重复使用它。

您还必须探索 Admin-on-rest 源以在 redux 和 redux-form 文档中找到表单键,以了解如何获取值。

然而,由于这是一个非常常见的场景,我会看看我们可以做些什么来使它更容易:

我们刚刚发布了aor-dependent-input!让我们知道这是否适合您:)

于 2017-05-13T08:03:47.670 回答