Как я могу использовать FieldArrays с машинописью?

Question

У меня есть форма, которая имеет 4 поля. Я хочу использовать FieldArray, чтобы иметь возможность добавлять / удалять формы. Я смотрю на этот пример, но мне трудно применить к машинописи. Например, я получаю ошибку из-за того, что лямбда-функция находится внутри onClick, так как теперь это запрещено в ts. Нужно ли использовать интерфейсы?

Большое спасибо заранее.

import { Field, FieldArray, reduxForm } from 'redux-form'
import validate from './validate'

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} type={type} placeholder={label} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)

const renderHobbies = ({ fields, meta: { error } }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push()}>
        Add Hobby
      </button>
    </li>
    {fields.map((hobby, index) => (
      <li key={index}>
        <button
          type="button"
          title="Remove Hobby"
          onClick={() => fields.remove(index)}
        />
        <Field
          name={hobby}
          type="text"
          component={renderField}
          label={`Hobby #${index + 1}`}
        />
      </li>
    ))}
    {error && <li className="error">{error}</li>}
  </ul>
)```

Answer 1

Хотя лямбда внутри onClick не рекомендуется из-за влияния на производительность, вы можете пойти на них, отключив правило tslint "jsx-no-lambda": false.

Если вы предпочитаете отключить правило только для этого файла, см. https://palantir.github.io/tslint/usage/rule-flags/

Другой способ - объявить вашу функцию внутри карты следующим образом:

{fields.map((hobby, index) => {
    const doSomething = () => fields.remove(index)
    return <li....>
})}

(Не уверен, что это решит производительность, хотя)