Material-UI 和 Redux 形式在映射时没有样式

Question

我创建了这个 codesandbox - https://codesandbox.io/s/pk8p4lvl90

我可以在没有映射机制的情况下很好地实现 material-ui 指令 (https://redux-form.com/7.2.2/examples/material-ui/)，但是一旦我应用了映射，我就无法获得 material-ui 实现文本域的外观。

在我的示例中，我已经注释掉了我尝试过的代码，该代码在不涉及映射的情况下工作。

表格 -

<form onSubmit={handleSubmit}>
  <div>
    {/* <Field
      name="firstName"
      component={renderTextField}
      label="First Name"
    />*/}
    <FieldArray
      name="firstName"
      component={renderTextField}
      label="First Name"
    />
  </div>
</form>

TextField 渲染 -

    const renderTextField = ({ fields, input, label }) => (
      <div>
        {fields.map((newIntel, index) => (
          {/* <TextField 
                name={newIntel} 
                key={index} 
                label={label} 
                placeholder={label} 
                component="input" 
                placeholder={label} 
                label={label} /> */}

          <Field
            name={newIntel}
            key={index}
            label={label}
            placeholder={label}
            component="input"
            placeholder={label}
            label={label}
          />
        ))}

        <div
          variant="fab"
          color="primary"
          className="jr-fab-btn"
          aria-label="add"
          onClick={() => fields.push()}
        >
          Click me
        </div>
      </div>
    );

Answer 1

为了使用具有 material-ui 外观的 redux-form 功能，您需要使用 redux-form 的具有渲染功能的输入组件，该组件将 return material-ui的组件与适当的道具。你开始这样做了，但是 renderTextField 应该看起来有点不同，例如：

const renderTextField = ({
  input,
  label,
  meta: { touched, error },
  ...custom
}) => (
    <TextField
      hintText={label}
      floatingLabelText={label}
      errorText={touched && error}
      {...input}
      {...custom}
    />
  )

有了这个，你可以重用它，比方说 renderForm 函数：

const renderForm = ({ fields, input, label }) => (
  <div>
    {fields.map((newIntel, index) => (
      <Field
        ...
        component={renderTextField}
        ...
      />
    ))}
    ...
  </div>
);

这是基于我在您链接的 redux-form 文档中找到的内容。那里也看一下，那里描述的也很好

Material-UI 和 Redux 形式在映射时没有样式

Material-UI and Redux-form not styling when being mapped

reactjs

material-ui

redux-form