Question

我正在使用一个texfield来清除按下Enter键时键入的输入文本，这会触发onSubmit函数，但是由于某些原因，当Multline设置为true时，onSubmit无法正常工作。

>>> df.loc[df['C'].idxmax()]
id      6
A     bar
C      60
D       4
Name: f, dtype: object

>>> df.loc[df['C'].idxmax()].name
'f'

我还添加了一个codeandbox，其中包含使https://codesandbox.io/s/nifty-morning-w2gqx更加容易的代码

Answer 1

根据材料ui的multiline文档：

多行道具将文本字段转换为textarea或TextareaAutosize

为multiple prop提供一个布尔值
要在按下enter时提交表单，请提供如下的onKeydown。
要在表单提交后自动调整大小，可以使用ref并将height设置为auto。

export default function App() {
  const inputRef = useRef();

  const addMessage = e => {
    console.log("hi");
    inputRef.current.getElementsByTagName("textarea")[0].value = "";
  };

  const handleKeyDown = event => {
    if (event.which === 13) {//<------use enter key to submit form
      inputRef.current.getElementsByTagName("textarea")[0].style.height = "auto"; //<------resize text area
      addMessage(event);
      event.preventDefault();
    }
  };

  return (
    <form onSubmit={addMessage}>
      <TextField
        ref={inputRef}
        multiline //<-----see here
        onKeyDown={handleKeyDown} //<-----see here
        id="filled-basic"
        label="Filled"
        variant="filled"
      />
    </form>
  );
}

working demo

注意：您还可以考虑按shift + enter键（不仅是输入）来提交表单。这样，用户可以按Enter键在文本区域的下一行中键入文本。（更好的用户体验）

//use shift + enter key to submit form
if (event.keyCode === 13 && event.shiftKey) {
 ...
}

Answer 2

材质UI组件TextField为多行使用布尔值。设置multiline = {true}或仅包含多行，如下所示：

<TextField
  inputRef={inputRef}
  multiline
  id="filled-basic"
  label="Filled"
  variant="filled"
/>

有关更多信息，请参见：https://material-ui.com/components/text-fields/#multiline

onSubmit不适用于多行文本输入

2 个答案: