Как получить value у input типа hidden в React?

Question

[Сергей Котов]

Мне понятно то, чтобы получить value у обычного input, нужно через событие onChange вызвать метод, который через event.target.value запишет его value в state.

Какое событие применить для input типа hidden чтобы вызвать метод? Ведь к нему не привязать onChange, так как он не редактируется

Comments

[Антон Спирин]

Зачем вам применять событие для input hidden?

[Сергей Котов]

Антон Спирин, нужно просто скажите как?

[Сергей Котов]

Антон Спирин, хорошо каким образом можно записать value типа hidden в state

[Сергей Котов]

Антон Спирин, рефы?

[Антон Спирин]

Сергей Котов, множеством способов, в том числе и рефами. Вы бы лучше код показали и задачу описали.

[Сергей Котов]

Антон Спирин, кароче решил рефами))))

[Антон Спирин]

Сергей Котов, скорей всего там был более простой и прямой путь.

Answer 1

[Сергей Котов]

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

<input type="hidden" name="hidename" value="какое то значение" ref={(input) => { this.hiddenInput = input }} />

Таким образом в this.hiddenInput.value будет лежать "какое то значение"

Comments

[Антон Спирин]

Остается большой загадкой, что вам мешает использовать установленное вами же "какое-то значение" напрямую.

[Сергей Котов]

Антон Спирин, ладно я в value передаю props

[Антон Спирин]

Сергей Котов, ну так и используйте значение из props напрямую.

[Сергей Котов]

Антон Спирин,

<input type="hidden" name="hidename" value={this.props.someVal} ref={(input) => { this.hiddenInput = input }} />

[Антон Спирин]

Сергей Котов, там где вы зачем-то получаете значение с помощью ref, просто используйте this.props.someVal.
Так же, не ясно зачем вообще в этой схеме скрытый input.
Еще вы используете старый ref API и неправильным способом. Функцию получения ref правильно выносить в тело класса или конструктор, так при перерисовках будет сохраняться ссылка.

[Сергей Котов]

Сергей Котов, потом я форму отправляю его на сервер, клиент не должен видит одно поле что я отправляю

[Сергей Котов]

Антон Спирин, блин точно совсем погнал

[Сергей Котов]

Антон Спирин, я просто еще не совсем шарю я только вчера начал юзать react))))

Answer 2

[Mikhail Osher]

https://codesandbox.io/embed/jolly-bose-rvyzh

Только не бейте за такое))

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [value, setValue] = React.useState("");
  const [hidden, setHidden] = React.useState("");
  const ref = React.useRef();

  function onInput(event) {
    setValue(event.target.value);
  }

  React.useEffect(() => {
    const observer = new MutationObserver(list => {
      for (const mutation of list) {
        if (mutation.attributeName === "value") {
          setHidden(ref.current.value);
        }
      }
    });

    observer.observe(ref.current, {
      attributes: true
    });

    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <div className="App">
      <div>Hidden: {hidden}</div>
      <input type="text" value={value} onInput={onInput} />
      <input type="hidden" value={value} ref={ref} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);