Question

我使用的是redux-form v6.0.1。我创建了一个类似于文档示例的组件：http://redux-form.com/6.0.1/examples/fieldArrays/

按照示例中的以下代码，我是否可以将<li key={index}>内的所有字段和操作按钮移动到单独的组件中以强制执行绑定或不使用箭头功能（https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md）？< / p>

const renderMembers = ({ fields }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push({})}>Add Member</button>
    </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>
)

谢谢你， Darek。

Answer 1

我可以将<li key={index}>内的所有字段和操作按钮移动到单独的组件中以强制执行绑定或不使用箭头功能吗？

不确定。你试过它并遇到问题吗？

Answer 2

我有一个非常复杂的表单，里面有很多数组字段，我知道箭头函数对性能非常不利。这就是为什么而不是

{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>
)}

我尝试过这样的事情：

{fields.map((member, index) =>
  <li key={index}>
    <Fields 
      names={`[${member}.firstname`, `${member}.lastName`]} 
      component={RenderNames}
      index={index}
    />
  </li>
)}

const RenderNames = (fields) => {
  const removeItem = () => {
    fields.remove(index);
  }

  return (
    <button
      type="button"
      title="Remove Member"
      onClick={removeItem} 
    />

    // how to get 'firstname' and 'lastname' here?
  )
}

但无法以文档

中描述的方式获取字段对象

FieldArrays在一个单独的组件中

2 个答案: