我正在处理交易表。我只想添加,删除和更新表中的交易。
我有一个'Transactions.js'功能组件,它具有事务状态(使用钩子),还有一个'TransactionsForm.js'组件,该组件接收'setTransactions'函数作为从'Transactions.js'到添加或更新交易状态
Transactions.js
const [transactions, setTransactions] = useReducer(
transactionsReducer,
fetchTransactions()
)
TransactionsForm.js
const [values, setValues] = useState({
description: '',
transactionType: '',
date: '',
category: '',
amount: ''
})
const handleChange = event => {
const { name, value } = event.target
setValues({ ...values, [name]: value })
}
const handleAdd = () => {
setTransactions({
type: 'add',
transactionType: 'income',
description: values.description,
date: values.date,
category: values.category,
amount: values.amount
})
}
const handleUpdate = () => {
setTransactions({
type: 'update',
id: 1,
transactionType: 'income',
description: values.description,
date: values.date,
category: values.category,
amount: values.amount
})
}
const handleSubmit = event => {
event.preventDefault()
// 1. handleUpdate() if the user is updating an existing transaction
// 2. handleAdd() if the user is adding new transaction
}
如您所见,我同时拥有handleAdd和handleUpdate这两个函数。但是我需要根据用户的操作(更新或添加)来调用其中之一,如果是更新,则需要获取交易ID。
完成此操作的最佳方法是什么?我知道我不应该为添加和更新创建两个单独的表单
答案 0 :(得分:2)
通常,我创建一个表单来处理添加和更新。您必须以这种方式创建表单以接受默认数据集,如果提供了默认数据集,只需将其加载到适当的控制字段中即可。
我的controls
道具形式如下:
const controls = [
{
key: 'supa-dupa-key',
type: 'text',
label: 'whatever',
required: true,
alertText: 'Not today...',
disabled: false,
defaultValue: ''
}
];
我用它来填写我的常用表单的本地状态,如果您想使用表单来添加内容,只需传递没有defaultValue
的控件即可;如果您想使用表单进行更新,只需填写控件即可defaultValue
属性:
fillUp = controls => ({
...controls.reduce((o, { key, defaultValue, type }) => ({
...o,
[key]: {
value: defaultValue || '',
isValid: false,
isInvalid: false
}
}), {})
});
每个控制字段将根据控制键获取value
和onChange
:
value={this.state[key]}
onChange={e => this.handleChange(e.target.value, key)}
此外,我使用动态控件渲染来从控件属性渲染每个控件。 这样的事情(根据需要创建尽可能多的类型):
renderTextControl = control => (
<Form.Group key={control.key} controlId={control.key}>
<Form.Label className="mb-1 text-muted">
{control.label}{control.required && ' *'}
</Form.Label>
<Form.Control
disabled={this.props.inProgress || control.disabled || false}
required={control.required || false}
type={type}
size="sm"
isValid={this.state[control.key].isValid}
isInvalid={this.state[control.key].isInvalid}
value={this.state[control.key].value}
onChange={this.handleChange(control.key, control.type)}
/>
{control.alertText &&
<Form.Control.Feedback type="invalid">
{control.alertText}
</Form.Control.Feedback>
}
</Form.Group>
);
我希望这可以为您提供帮助,并且您可以使其适应您的需求。