我正在处理交易表。我只想添加,删除和更新表中的事务。
我有一个'Transactions.js'功能组件,它具有事务状态(使用钩子),我还有一个'TransactionsForm.js'组件,它从'Transactions.js'接收'setTransactions'函数作为prop来添加或更新交易状态
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。
完成此任务的最佳方法是什么?我知道我不应该为添加和更新创建两个单独的表单
通常我创建一个表单来处理添加和更新。您必须以接受默认数据集的方式创建表单,如果提供,只需将它们加载到适当的控制字段中即可。
我的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)}
另外,我使用动态控件渲染来渲染控件prop中的每个控件。像这样的东西(根据需要创建尽可能多的类型):
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>
);
我希望这可以帮助您,您可以根据您的需求进行调整。