React-如何在 TextField 具有值时启用按钮

Question

因此，我尝试在文本字段中输入值后立即启用按钮。启用它的唯一方法是在将值放入文本字​​段后单击文本字段外部。我知道我错过了一些小东西，但我仍然没有找到正确的方法。我将不胜感激你的建议。

TextField 和 LoadingButton 的代码

窗口

Answer 1

我只包含了相关部分。

import { useState } from "react";

export default function Home() {
  const [name, setName] = useState("");

  const hanldeUserInput = (e) => {
    setName(e.target.value);
  };

  return (
    <Dialog>
      <TextField onChange={hanldeUserInput} value={name} />

      <LoadingButton disabled={name === ""}>Save</LoadingButton>
    </Dialog>
  );
}

Answer 2

您可以跟踪文本字段中的当前值并将其存储在状态中。

const [txtFieldValue, setTxtFieldValue] = useState<string>('')

并编写一个在文本字段中的更改事件上触发的函数：

function handleTxtFieldChange(event) {
    if (event.target.id === 'myTextFieldId') {
      setTxtFieldValue(event.target.value)
    }
  }

然后您可以调整文本字段：

      <TextField
        id={'myTextFieldId'}
        // ... all your other stuff
        onChange={(event) => {
          handleTxtFieldChange(event)
        }}
      />

然后您可以使用 set txtFieldValue 来呈现按钮，如下所示：

{txtFieldValue != '' ? <Button /> : <></>}

或者如果您只想禁用它，您可以使用

txtFieldValue != ''

作为布尔值。