Блог

Главная - Вопросы по программированию - Как мы можем установить значение по умолчанию для генератора правил реакции в react-admin?

Как мы можем установить значение по умолчанию для генератора правил реакции в react-admin?

#reactjs #react-admin #recurrence #rrule

#reactjs #react-admin #повторение #rrule

Вопрос:

Я использую 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>
  )
}

Если я добавлю value={props.record.recurrency} RRuleGenerator компонент, я не смогу изменить значения, потому что я как бы фиксировал / жестко кодировал его значение, которое остается постоянным, даже если я пытаюсь их изменить. Если бы у этого виджета был вызван prop defaultValue , тогда это сработало бы!
Как я могу этого добиться?

Ответ №1:

Если вы внимательно изучите входные данные документации / напишете свою собственную часть ввода, вы заметите, что пользовательские компоненты ввода, использующие useField useInput хуки or, по-прежнему получают source prop, который передается внутри ввода как часть параметров хука.

Попробуйте это:

Внутри 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>
  )

Комментарии:

1. Теперь даже «создать» не работает. Передача name вместо source в main_file.jsx прошла успешно. Единственная проблема заключалась в том, что при редактировании виджет Rrule не отображал предыдущее значение этой записи. Но использование source даже не позволяет мне создавать или редактировать запись.

2. Извините, я перепутал свой код. Создание и редактирование работ. Но я все равно не могу получить начальные значения при редактировании записи в виджете правил!

Ответ №2:

Неважно, я это сделал! Я могу использовать это как для создания, так и для обновления записей. Я также использовал библиотеку 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)" />