Используйте один и тот же компонент формы для добавления, обновления и обновления. ReactJs

Question

Я работаю над таблицей транзакций.Я просто хочу добавить, удалить и обновить транзакции в таблице.

У меня есть функциональный компонент «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.но мне нужно вызвать один из них в соответствии с действием пользователя (обновить или добавить), а также, если это обновление, мне нужно получить идентификатор транзакции.

Каков наилучший способ выполнить это?Я знаю, что я не должен создавать две отдельные формы для добавления и обновления

Answer 1

Обычно я создаю одну форму для обработки как добавления, так и обновления. Вы должны создать свою форму таким образом, чтобы принимать набор данных по умолчанию и, если это предусмотрено, просто загрузить их в соответствующее поле управления.

Мои 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>
);

Надеюсь, это поможет вам, и вы сможете адаптировать это к вашим потребностям.