React Material UI 多行文本字段 OnSubmit 不会触发

Question

我正在尝试设计一个类似于Slack风格的文本输入框。您可以在哪里执行 Ctrl+Enter 换行和 Enter 提交。这对于 Material UIs 文本字段甚至 Material UI 是否可行？

谢谢！

Answer 1

您可以使用 material-ui 的文本字段，默认情况下它在输入字段中只提供一行，但您也可以通过设置 bool multiLine={true} 扩展到多行.

在多行的情况下 Ctrl+Enter 将如您所愿。像这样：

<TextField
    hintText="MultiLine with rows: 2 and rowsMax: 4"
    multiLine={true}
    rows={2}
    rowsMax={4}
/>

要进行更多自定义，您还可以指定行数和最大行数。输入您可以在 onchange 事件中实现的功能，通过检查输入键的键代码，如下所示：

onChange(event, value){
    if(event.keyCode == 13){
        //put the logic here
    }

React Material UI Multiline Textfield OnSubmit won't fire