I am using a Material UI button for my TODO react app. I just want my form to have a input field with submit button, but I want my submit Button to invisible so that user have a feeling that my form submits on clicking "Return" key.

   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>

I added display: none; to my css still it does not disappears.

.buttonDisplay{
   display: none;
 }

Can someone tell me what is the issue with it.

CodePudding user response：

If are looking for a way to submit form without a button, take a look at this.

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>
  );
}

onSubmit will be triggered when you press 'return' key

sandbox : https://codesandbox.io/s/polished-bush-uzi6e?file=/src/App.js

CodePudding user response：

You can use different method to hide a button using CSS :

• modify the opacity parameter
• adjust the alpha color parameter
• or just change the visibility aspect of your button

Here is a link that might help you using these elements :

Ways to hide elements in CSS