Удалите значение из ввода с помощью useState или useRef (React)

У меня есть крючок:

const [myName, setMyName] = useState("");
const myNameRef = useRef();

Тогда у меня есть форма:

<form onSubmit={(e) => addVist(e, user.id)}>
 <input type="text" name="myName" ref={myNameRef} onChange={e => setMyName(e.target.value)} />
 <input type="submit" value="Run" />
</form>

И метод:

const addVist = (e, userId) => {
        e.preventDefault();

        console.log(myName)
        //some code....

        //clear value form
        setMyName("");
        //setMyName('');
        //setMyName(e.target.value = "");
        //myNameRef.current.value("");

    }

Но setMyName("") не работает - я все еще вижу значение внутри ввода.


react-native reactjs react-hooks use-state use-ref
person 4est    schedule 30.11.2020    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Вы пропустили привязку myName как value атрибута тега input.

 <input type="text" name="myName" value={myName} ref={myNameRef} onChange={e => setMyName(e.target.value)} />
person wangdev87    schedule 30.11.2020

arrow_upward
1
arrow_downward

При вводе текста вы должны передать myName в атрибут значения, например,

<input type="text" name="myName" value={myName} ref={myNameRef} onChange={e => setMyName(e.target.value)} />
person Evan Christians    schedule 30.11.2020

arrow_upward
1
arrow_downward

Вы забыли добавить myName в качестве значения.

<input type="text" name="myName" value={myName} ref={myNameRef} onChange={e => setMyName(e.target.value)} />
person Elif    schedule 30.11.2020

arrow_upward
0
arrow_downward

Вот полный пример очистки input с использованием состояния ИЛИ ссылки:

export default function App() {
  const [value, setValue] = useState("");
  const inputRef = useRef();
  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <input ref={inputRef} />
      <button
        onClick={() => {
          setValue("");
          inputRef.current.value = "";
        }}
      >
        Clear
      </button>
    </>
  );
}

См. Контролируемые VS неконтролируемые компоненты.

person Dennis Vash    schedule 30.11.2020
comment
тоже спасибо @Dennis - person 4est; 30.11.2020
comment
Вы вообще-то спросили, как сбросить с реф. - person Dennis Vash; 30.11.2020
comment
но если мне это не нужно, я не буду его использовать - person 4est; 30.11.2020