Question

我已经创建了此代码框-https://codesandbox.io/s/pk8p4lvl90

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

在我的示例中，我注释掉了我尝试的无需映射就可以工作的代码。

表格-

<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

要使用redux-form功能和material-ui外观，您需要将redux-form的输入组件与render函数一起使用，该函数将返回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格式文档中找到的内容。再看看那里，那里也有很好的描述。

Material-UI和Redux-form映射时未样式化

1 个答案: