1

我正在解决单击后设置多行输入的问题。（默认情况下是单行）我创建了一个状态，我在 onFocus 事件上设置为 true（我在 onBlur 事件上将其设置为 false）。问题是点击后，我立即失去了输入的焦点，不得不再次点击。有什么解决办法吗？

export default function App() {
  const [focus, setFocus] = React.useState(false);
  return (
    <TextField
      type="text"
      value="lollec asda sd asd as das "
      onFocus={() => setFocus(true)}
      onBlur={() => setFocus(false)}
      multiline={focus}
      rows={3}
    />
  );
}

演示：https ://codesandbox.io/s/hardcore-night-vhep1?file=/src/App.js

4

1 回答 1

0

您可以通过更改...来完成您描述的行为

multiline={focus}
rows={3}

到...

multiline
rows={focus ? 3 : 1}

但是，当输入没有聚焦时，这会在输入上引入滚动条。此外，单击输入会将光标聚焦在文本的第一行（您单击的位置）。您可能希望光标集中在文本的末尾。

如果您对光标位于第一行感到满意，那么我只需添加一些样式来隐藏滚动条。

如果没有，您将需要管理输入的 ref 并专门调用ref.current.focus(). 通常，这将集中在文本的开头，因此您需要采取额外的步骤来确保焦点在末尾。查看这个问题以获得帮助：Send cursor to the end of input value in React

于 2021-05-28T23:45:28.840 回答