Question

我在React应用中有一个注册表单。我正在使用material-ui TextField并使用errorText属性在输入中出现错误时添加消息。

errorText={this.state.messages.emailMessage}

state.messages.emailMessage最初设置为null，因此TextField在首次呈现输入时没有额外的空间。

当消息被添加时，它会移动其他元素。

如果需要新节点，我如何为新节点留出空间，以便不移动其他元素？我尝试将消息的初始状态设置为''，但是这会将输入红色设置为错误，并且无论如何都不起作用！

Answer 1

您可以使用errorStyle属性设置绝对位置.. 这就是我在项目中解决这些问题的方法。

Answer 2

最后，我将一个样式参数传递给material-ul组件，该组件将errorText设置为display：table。这样就可以在添加元素时阻止它影响其他元素。

Answer 3

将位置设置为绝对根本不起作用。这样可以在输入字段上显示错误文本。因此，为了完美修复，我们还必须设置一些值以使其固定。以下示例。

errorStyle:{
      position: 'absolute',
      bottom: '-0.9rem'
    }

如在其他答案设置显示表中所提到的那样。

所以两种风格都适用

Answer 4

该样式应添加到哪里？

需要为HelperText样式添加它。这是一个示例：

const helperStyles = makeStyles(theme => ({
  root: {
      position: 'absolute',
      bottom: '1em',
  },
}))

const helperClasses = helperStyles()

<FormHelperText classes={helperClasses}>
    {helperText}
</FormHelperText>

Answer 5

对于那些需要更新答案的人（据我所知，errorText 不再是一回事），那么希望这会奏效：

<Box style={{ minHeight: "100px" }} >
  <TextField
    {...props}
  />
</Box>

它允许在 flexbox 内部呈现错误文本消息，而不会影响其他组件，因此它不应该打扰周围的事物。 CodeSandbox

将ErrorText添加到材料-ui Textfield移动其他元素

5 个答案: