ReactJS: доступ к очень простому входному значению формы при отправке и изменении

Question

Я понимаю, что это может быть простым, поскольку я новичок в реакции, но я пытаюсь очень просто регистрировать значение ввода всякий раз, когда оно изменяется или отправляется.

Вот код:

import React from "react";

const App = () => {
  const onNameChange = (nameInput) => {
    console.log("name change Fn", nameInput);
  };

  return (
    <>
    <form onSubmit={onNameChange(this.value)}>
      <input value='the value' type="text" onChange={console.log(this.value)}></input>
    </form>
    </>
  );
}

export default App

Почему я не могу щелкнуть внутри формы и изменить значение?
Как я могу регистрировать значение ввода всякий раз, когда щелкаю внутри и меняю его?
Как я могу зарегистрировать значение ввода при отправке?

Спасибо ... Вот демонстрация stackblitz: https://stackblitz.com/edit/react-tvk69a < / а>

reactjs

0

user8758206 9 Ноя 2020 в 18:10

Answer 1

РЕДАКТИРОВАТЬ: Почему я не могу щелкнуть внутри формы и изменить значение?

Вы передаете жестко закодированное значение в форме Input, вам необходимо заменить его значением, которым вы можете управлять в своих компонентах. Таким образом, вы можете добавить что-нибудь в свое состояние, чтобы отслеживать его, например:

const [value, setValue] = React.useState('')

И вставьте его в свой элемент ввода:

<input value={value}...

Наконец, вам нужно обработать изменения, чтобы состояние обновилось:

<input value={value} onChange={e => setValue(e.target.value)}

Как я могу регистрировать значение ввода всякий раз, когда щелкаю внутри и меняю его?

Вы можете использовать реквизиты onClick и onChange и передать туда свой обработчик:

<button onClick={activateLasers}> Activate Lasers </button>.

<input value={value} onChange={e => setValue(e.target.value)} />

Как я могу зарегистрировать значение ввода при отправке?

В теге вы можете передать свойство onSubmit с вашим обработчиком, которое будет запускаться из его внутреннего type = 'submit'

<form onSubmit={handleSubmit}>

2

Mario Perez 9 Ноя 2020 в 15:35

Answer 2

Здесь вы можете увидеть полный пример:

import React, { useState, useEffect } from "react";

const App = () => {
  const [textV, setTextV] = useState("the value");

  const onNameChange = () => {
    event.preventDefault();
    console.log("name change Fn", textV);
  };

  useEffect(() => {
    console.log("Text has changed: ", textV);
  }, [textV]);

  return (
    <form onSubmit={onNameChange}>
      <input
        value={textV}
        type="text"
        onChange={e => setTextV(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default App;

Вы можете поиграть с ним здесь: https://stackblitz.com/edit/react-ky2cks?file= src / App.js

Объяснение: Чтобы контролировать изменение значения текстовой области, вы должны использовать состояние реакции.

import React, { useState, useEffect } from "react";
    
    const App = () => {
      const [textV, setTextV] = useState("the value");

Затем вам понадобится кнопка отправки для вызова события onSubmit в форме.

       <form onSubmit={onNameChange}>
          <input
            value={textV}
            type="text"
            onChange={e => setTextV(e.target.value)}
          />
          <button type="submit">Submit</button>
        </form>

В форме вы можете видеть, что я изменяю входное значение с "значения" на {textV}, потому что textV - это состояние, которое я объявлял раньше, а в функции onChange я вызываю функцию обработчика состояния, чтобы изменить значение состояние textV, эта функция позволяет мне обновлять состояние каждый раз, когда изменяется входное значение.

Чтобы регистрировать значение состояния при каждом изменении входного значения, вы можете использовать ловушку useEffect:

 useEffect(() => {
    console.log("Text has changed: ", textV);
  }, [textV]);

2

Yoandry Collazo 9 Ноя 2020 в 15:57

ReactJS: доступ к очень простому входному значению формы при отправке и изменении

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

reactjs