我正在為我的 TODO react 應用程式使用 Material UI 按鈕。我只希望我的表單有一個帶有提交按鈕的輸入欄位，但我希望我的提交按鈕不可見，以便用戶感覺我的表單在單擊“回傳”鍵時提交。
import { TextField, Button } from '@material-ui/core';
<form>
<TextField
id="standard-basic"
label="Write a Todo"
variant="standard"
className="textField"
value={todoInput}
onChange={(e) => {
setTodoInput(e.target.value);
}} />
<Button
type="submit"
variant="contained"
onClick={addToDo}
className="buttonDisplay">
Display
</Button>
</form>
我添加了 display: none; 對我的 CSS 來說，它仍然沒有消失。
.buttonDisplay{
display: none;
}
有人可以告訴我它有什么問題。
uj5u.com熱心網友回復：
如果正在尋找一種無需按鈕即可提交表單的方法，請查看此。
export default function App() {
const [todoInput, setTodoInput] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
alert(todoInput);
};
return (
<form
onSubmit={(e) => {
handleSubmit(e);
}}
>
<TextField
id="standard-basic"
label="Write a Todo"
variant="standard"
className="textField"
value={todoInput}
onChange={(e) => {setTodoInput(e.target.value)}}
/>
</form>
);
}
當你按下'return'鍵時會觸發onSubmit
沙箱：https ://codesandbox.io/s/poliished-bush-uzi6e?file=/src/App.js
uj5u.com熱心網友回復：
您可以使用不同的方法使用 CSS 隱藏按鈕：
- 修改
opacity引數 - 調整
alpha color引數 - 或者只是更改
visibility按鈕的外觀
這是一個可以幫助您使用這些元素的鏈接：
在 CSS 中隱藏元素的方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/422172.html
標籤：
上一篇：C#表單，如何用按鈕停止執行緒？