Question

我正在使用Formik和Material-UI在Reactjs中创建一个表单。我在Material-ui外观上感觉到Select字段的行为。

问题在于，在“字段”中选择一个选项并使其模糊后，字段标签没有像应有的那样保留在顶部，但它返回到初始位置，就像“字段”充满。您可以检查行为和代码in the sandbox。

我正在使用Material-UI TextField组件，该组件使用子组件FormControl负责保持状态为字段组。在FormControl组件状态下，有一个名为filled（see source here）的布尔值，用于跟踪input是否已填充。我认为问题的根源在于，国家的这一性质始终是假的。但是，专注于该属性的另一个属性确实会发生变化。

我认为onChange函数应用于该字段时发生了某些事情。我需要来自Formik的onChange处理表单状态，它可能与其他状态相反。

我试图找到某种方法来处理FormControl填充属性，但没有成功。

这是主要代码。但是，很容易检查代码in the sandbox。

class SelectField extends Component {
  render() {
    const { field, form, disabled = false, children, ...props } = this.props;
    const { name, onChange, onBlur, value } = field;
    const { touched, errors, isSubmitting } = form;
    const fieldError = getIn(errors, name);
    const showError =
      (getIn(touched, name) && !!fieldError) ||
      (form.submitCount > 0 && !!fieldError);

    return (
      <MuiTextField
        fullWidth
        error={showError}
        id="filteringField"
        label="Tipo de territorio"
        helperText={showError ? fieldError : props.helperText}
        select={true}
        SelectProps={{
          disabled: isSubmitting || disabled,
          ...props,
          ...field
        }}
        children={children}
      />
    );
  }
}

如前所述，该组件由Field Formik组件包裹：

<Field id="filteringField" name="filteringField" component={SelectField}>
  <MenuItem value="region">Región</MenuItem>
  <MenuItem value="provincia">Provincia</MenuItem>
  <MenuItem value="comuna">Comuna</MenuItem>
</Field>

因此，我想知道是否有某种方法可以从父组件访问FormControl状态，或者通过任何其他解决方案来使其正常工作。感谢您的帮助！

使用Formik时，FormControl Material-UI组件中的“选择”字段缺少填充状态

0 个答案: