我们如何在 react-admin 中设置 React RRule Generator 的默认值？答案

【问题标题】：How can we set default value for React RRule Generator in react-admin?我们如何在 react-admin 中设置 React RRule Generator 的默认值？
【发布时间】：2020-09-27 14:46:53
【问题描述】：

我正在使用 react-admin 和 react-rrule-generator (https://github.com/Fafruch/react-rrule-generator)。使用 rrule 小部件时创建/添加记录工作正常。但是每当我尝试编辑记录时，小部件应该根据记录的值自动填充其值。但该值始终是小部件本身提供的默认值。这是我的代码：

main_file.jsx

export const JobCreate = (props) => {
  return (
    <Create {...props}>
      <SimpleForm>
        <CustomRRuleInput name="recurrency" label="Recurrency" />
      </SimpleForm>
    </Create>
  )
}

recurrency_field.jsx

export const CustomRRuleInput = (props) => {
  const {
    input: { onChange },
    meta: { touched, error },
  } = useInput(props)

  return (
    <Labeled label={props.label}>
      <RRuleGenerator
        onChange={onChange}
        name={props.name}
      />
    </Labeled>
  )
}

如果我在RRuleGenerator 组件中添加value={props.record.recurrency}，我无法更改值，因为我固定/硬编码了它的值，即使我尝试更改它们也是恒定的。如果这个小部件有一个名为defaultValue 的道具，那么它就会成功！我怎样才能做到这一点？

【问题讨论】：

标签： reactjs react-admin recurrence rrule

【解决方案1】：

如果您仔细检查文档的Inputs/Writing your own input 部分，您会注意到使用useField 或useInput 挂钩的自定义输入组件仍会收到source 属性，该属性作为挂钩参数的一部分在输入内部传递。

试试这个：

main_file.jsx 内部

<CustomRRuleInput source="recurrency" label="Recurrency" />

recurrency_field.jsx 内部

const {
    input: { name, onChange },
    meta: { touched, error },
  } = useInput(props)

  return (
    <Labeled label={props.label}>
      <RRuleGenerator
        onChange={onChange}
        name={name}
      />
    </Labeled>
  )

【讨论】：

现在，即使“创建”也不起作用。在 main_file.jsx 中传递 name 而不是 source 成功。唯一的问题是在编辑时，Rrule 小部件 没有显示该记录的先前值。但是使用source 甚至不允许我创建或编辑记录。
对不起，我搞砸了我的代码。创建和编辑作品。但是在 RRule 小部件中编辑记录时我仍然无法获取 initialValues！

【解决方案2】：

没关系，我做到了！我可以用它来创建和更新记录。我还使用 rrule 库将 rrule 转换为人类可读的文本，该文本显示在 RRule 小部件下方的 TextInput 字段中。当您更改 RRule 小部件中的数据时，文本会动态更改。

recurrency_field.jsx

import RRuleGenerator from "react-rrule-generator"
import React, { useState } from "react"
import { useInput, Labeled, TextInput } from "react-admin"
import { rrulestr } from "rrule"


export const CustomRRuleInput = (props) => {
  const record = props.record
  const {
    input: { onChange },
  } = useInput(props)

  const [state, setState] = useState(record[props.name])

  return (
    <>
      <Labeled label={props.label}>
        <RRuleGenerator
          onChange={(val) => {
            setState(val)
            onChange(val)
          }}
          value={state}
          name={props.name}
        />
      </Labeled>

      <TextInput
        fullWidth
        disabled
        label={"RRule Text"}
        value={state ? rrulestr(state).toText() : ""}
      />
    </>
  )
}

main_file.jsx

<CustomRRuleInput name="recurrency" label="Recurrency(r rule)" />

【讨论】：