How can I do to clear my input when I click on the button?-CodePudding

I am trying on a code using React with an input and a button. When I click on a button I would like to clear the input or it is not the case. Here is my code :

import { useState } from "react";
import "./styles.css";

const App = () => {
  const [finalValue, setFinalValue] = useState(true);
  const changevalue = () => {
    setFinalValue(!finalValue);
  };
  return (
    <div className="App">
      {finalValue ? (
        <input
          type="text"
          placeholder=" E-mail"
          className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0"
        />
      ) : (
        <input
          type="text"
          placeholder=" Pseudo"
          className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0"
        />
      )}
      <button onClick={() => changevalue()}>Change input</button>
    </div>
  );
};

export default App;

Here is my code : https://codesandbox.io/s/wandering-fire-hj8d84?file=/src/App.js:0-823

Could you help me please ?

Thank you very much !

NB : I tried to use value but I was not able to type on the input and I also tried to use defaultValue without any success.

CodePudding user response：

You have to use useRef I have implemented this below,

First, you have to import useRef Hook and then make a constant one

const one = useRef("") then in the input tag you have to add ref={one}.

Then in the changevalue function you have to write one.current.value = "";

import { useState ,useRef } from "react";
import "./styles.css";

const App = () => {
  const [finalValue, setFinalValue] = useState(true);
  const one  = useRef("");
  const changevalue = () => {
    setFinalValue(!finalValue);
    one.current.value = "";
  };
  return (
    <div className="App">
      {finalValue ? (
        <input ref={one}
          type="text"
          placeholder=" E-mail"
          className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0"
        />
      ) : (
        <input  type="text" ref={one}
          placeholder=" Pseudo"
          className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0"
        />
      )}
      <button onClick={changevalue}>Change input</button>
    </div>
  );
};

export default App;

CodePudding user response：

First of all you could use const [inputValue, setInputValue] = useState(''); to use/change/clear input value; Then just set value and onChange function into input tag (event.target.value will be your input string value). And with you button just set inputValue to default ''; Hope this help

CodePudding user response：

Try this one

import { useState, useRef } from "react";
import "./styles.css";

const App = () => {
  const [finalValue, setFinalValue] = useState(true);
  const emailRef = useRef();
  const changevalue = () => {
    setFinalValue(!finalValue);
    emailRef.current.value = "";
  };
  return (
    <div className="App">
      {finalValue ? (
        <input
          type="text"
          ref={emailRef}
          placeholder=" E-mail"
          className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0"
        />
      ) : (
        <input
          type="text"
          ref={emailRef}
          placeholder=" Pseudo"
          className="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0"
        />
      )}
      <button onClick={() => changevalue()}>Change input</button>
    </div>
  );
};

export default App;

CodePudding user response：

This link might help you. have a read https://bobbyhadz.com/blog/react-clear-input-value#:~:text=To clear the input's value,button that triggers an event.