🦊 🎽 😠 将React Forms与Tasklist Camunda一起使用 🏜️ 🚊 ⬜️

当您有自定义任务并且不想使用或创建自己的解决方案时，Camunda Tasklist非常有用。内置表单在设计用户界面时提供了很大的灵活性。近年来，React已成为构建用户界面的最受欢迎的库之一。在这篇博客文章中，我将向您展示如何与任务列表一起使用React表单。

让我们先看一下我们的流程：已收到发票，需要进行检查。我们将专注于初始发票表格和自定义任务-使用Camunda Workflow Engine实施自动化任务非常简单。

我们将使用内联表单执行任务。将React作为自定义脚本添加到任务列表后，我们可以开始构建界面。在此示例中，我不会使用JSX，因此您可以快速部署它而无需进行编译。让我们从一个简单的字段开始显示值：

class DisplayGroup extends React.Component {
  render() {
    return e('div', {className: 'form-group'}, [
      e('label', {className: 'control-label col-md-4', key: 'label'}, this.props.label),
      e('div', {className: 'col-md-6', key: 'container'},
        e('input', {
          className: 'form-control',
          value: this.props.value,
          readOnly: true
        }))
      ]);
  }
}

此无状态组件使用Bootstrap类进行样式设置。如果我们需要显示多个值，例如金额和发票供应商，则可以多次创建它。例如，您可以根据需要创建一个表单：

e(DisplayGroup, {
  label: 'Amount: ',
  value: this.props.amount.value,
  key: 'Amount'
}),
e(DisplayGroup, {
  label: 'Creditor: ',
  value: this.props.creditor.value,
  key: 'Creditor'
}),
e(DisplayGroup, {
  label: 'Invoice Category: ',
  value: this.props.category.value,
  key: 'Category'
}),
e(DisplayGroup, {
  label: 'Invoice Number: ',
  value: this.props.invoiceID.value,
  key: 'InvoiceID'
}),
e('label', {className: 'control-label col-md-4', key: 'ApprovalLabel'}, 'I approve this Invoice'),
e('div', {className: 'col-md-6', key: 'ApprovalContainer'},
  e('input', {
    className: 'form-control',
    name: 'approved',
    type: 'checkbox',
    checked: this.state.value,
    className: 'form-control',
    onChange: this.handleInputChange
  })
)

在我们的输入字段下方，我添加了一个托管组件来处理用户输入。由于我们必须决定是否批准此帐单，因此只需一个简单的复选框即可。这几行代码已经生成了大多数最终批准表。我刚刚添加了标题并完成了工作。

如您所见，在Tasklist中使用像React这样的框架不仅是可能的，而且非常简单。如果您想了解更多，可以查看Github上可用的源代码。

将React Forms与Tasklist Camunda一起使用

More articles: