如何将redux-form的fieldArray field.push限制为3

Question

如何限制redux-form的fieldArray field.push 应该最多三点。 使用redux-from示例 版本6.8.0

 const renderMembers = ({ fields, meta: { touched, error } }) => (
 <ul>
  <li>
  <button type="button" onClick={() => fields.push({})}>Add Member</button>
  {touched && error && <span>{error}</span>}
  </li>
  {fields.map((member, index) =>
  <li key={index}>
    <button
      type="button"
      title="Remove Member"
      onClick={() => fields.remove(index)}/>
    <h4>Member #{index + 1}</h4>
    <Field
      name={`${member}.firstName`}
      type="text"
      component={renderField}
      label="First Name"/>
    <Field
      name={`${member}.lastName`}
      type="text"
      component={renderField}
      label="Last Name"/>
    <FieldArray name={`${member}.hobbies`} component={renderHobbies}/>
  </li>
  )}
</ul>

）

Answer 1

您可以有条件地传递处理程序：

onClick={() => fields.length <= 3 && fields.push({})}