向material-ui添加ErrorText Textfield移動其他元素

我在React應用程序中有一個註冊表單。我正在使用material-ui TextField，並在輸入中出現錯誤時使用errorText屬性添加消息。向material-ui添加ErrorText Textfield移動其他元素

errorText={this.state.messages.emailMessage}

的state.messages.emailMessage最初設置爲null，因此文本字段不具有消息的額外空間，當輸入第一次呈現。

當消息是添加它移動其他元素。

如何在需要時爲新節點留出空間以便其他元素不會移動？我嘗試將消息的初始狀態設置爲「'」，但是這會使輸入變爲紅色以顯示錯誤，並且無法正常工作！

2016-05-29 leonormes

您可以只使用errorStyle屬性設置絕對位置。這就是我如何解決我的項目中的這些問題。

2016-05-29 19:11:31

最後，我將一個樣式參數傳遞給material-ul組件，該組件將errorText設置爲顯示：table。然後在添加它時阻止它影響其他元素。

2016-05-31 13:38:34 leonormes

正好設置顯示錶爲我工作 –

只是設置位置爲絕對沒有工作。這使錯誤文本顯示在輸入字段上。因此，爲了完美的解決，我們還必須設置一些有價值的底部，使其得到修復。下面的例子。

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

正如其他答案設置顯示中所提到的那樣，表格也起作用。

所以這兩種風格的作品

2018-01-20 14:56:21

回答