如何以编程方式更改 react-admin 创建组件中的记录答案

【问题标题】：How do I programmatically change the record inside a react-admin create component如何以编程方式更改 react-admin 创建组件中的记录
【发布时间】：2020-07-16 17:43:37
【问题描述】：

我有一个创建组件，我希望其中一个输入来自列表。我目前拥有的代码是：

export const ContestCalendarCreate = (props) => {
  const createControllerHook = useCreateController(props)
  const [selectedContest, setSelectedContest] = useState<any>()
  const {
    record, // empty object, unless some values were passed in the location state to prefill the form
  } = createControllerHook

  if (selectedContest) {
    record.selectedContest = selectedContest
  }

  const selectContest = (rowRecord) => {
    record.selectedContest = rowRecord
    setSelectedContest(() => rowRecord)
  }

  const transformData = (data) => {
    data.startTimestamp = moment(data.startTimestamp).unix() * 1000
    data.opensAt = moment(data.opensAt).unix() * 1000
    data.start_timestamp = data.startTimestamp
    data.opens_at_timestamp = data.opensAt
    data.id = data.selectedContest.id
    data.contest_title = data.selectedContest.contest_title
    return data
  }
  return (
    <Create {...props} transform={data => transformData(data)} >
      <SimpleForm>
        <DateTimeInput source="startTimestamp" disabled label="Starts At" validate={[required()]} />
        <DateTimeInput source="opensAt" label="Opens At" validate={[required()]}/>
        {selectedContest ?
          <TextField record={record} source="selectedContest.contest_title" label="Contest" validate={[required()]}/>
          :
          <ReferenceManyField label="Select A Contest" reference="admin/contest" allowEmpty filter={{approved: true, states: [ContestState.unpublished]}}>
            <List filters={<ContestFilter />} bulkActionButtons={false} exporter={false} sort={{ field: 'contest_title', order: 'DESC' }} >
              <Datagrid rowClick={(id, path, rowRecord) => selectContest(rowRecord)}>
                <TextField source="contest_title" />
                <TextField source="contest_description" />
                <TextField source="quiz_title" />
                <TextField source="quiz_description" />
                <TextField source="topics" />
              </Datagrid>
            </List>
          </ReferenceManyField>
        }
        {selectedContest && <Button variant="contained" color="default" disableElevation onClick={() => selectContest(null)}>Select Another Contest</Button>}
      </SimpleForm>
    </Create>
  )
}

selectContest 函数排序的工作；但是，当它执行时，它会将其他表单输入重置为其默认值。

我是否可以通过其他方式更改从 useCreateController 挂钩获得的记录？

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

如果我没有正确回答您的问题 - 您需要在 Datagrid 的行点击事件中更新当前表单中的 "selectedContest" 字段。您可以使用react-final-form 钩子useForm 和可用的更改方法，而不是覆盖记录，如下所示：

const form = useForm();

// rowClick function
(id, path, rowRecord) => form.change('selectedContest', rowRecord)

这在链接两个输入部分下的文档中进行了解释：React-Admin Docs

【讨论】：

实际上并没有在那里解释，但我猜它是最终形式的文档
一个问题，这个例子中useForm()应该放在哪里？
在 SimpleForm 组件内部 - 您可以将整个表单的子级提取到另一个组件来执行此操作。或者只提取 DataGrid 部分，然后在那里调用它。
是的，实际上我从错误消息中知道它（必须放在表单中），但无法弄清楚如何在不将其移动到另一个组件的情况下调用 useForm()。感谢您的确认。