Блог

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

function App() {
  const [InputVal, setInputVal] = useState();
  const [ShowDiv, setShowDiv] = useState(
    <div>
      <p>Hello world. This is default "Show Div" value</p>
    </div>
  );

  const ChangeDivFunc = () => {
    setShowDiv(
      <div>
        <p style={{ color: "red" }}>
          Hello World. This is updated "Show Div" value
        </p>
        <input onChange={getInputval} type="text" />
        <br />
        <br />
        <button onClick={AlertVal}>Show Input Value</button>
      </div>
    );
  };

  const getInputval = (val) => {
    setInputVal(val.target.value);
  };

  const AlertVal = () => {
    alert(InputVal);
  };

  return (
    <div className="App">
      <h1>Example</h1>
      <br />
      <button onClick={ChangeDivFunc}>Change Div</button>
      {ShowDiv}
    </div>
  );
}

export default App;

 

Поток кода:

1. Нажмите кнопку Изменить Div, затем отобразится поле ввода и кнопка Показать значение ввода.
2. Теперь введите некоторое значение в поле ввода и нажмите кнопку Показать вводимое значение, чтобы получить значение поля ввода.

Проблема: вместо значения поля ввода возвращается undefined.

Я пытаюсь получить значение поля ввода при нажатии кнопки Показать входное значение. Но я не получаю желаемых результатов.

Вот ссылка на песочницу: нажмите для кода

Не храните html-узел внутри состояния. Вы можете просто сохранить только логическое значение, чтобы переключаться между тем, какой узел показывать. Я не совсем уверен, но это может вызвать странное поведение, поскольку React внутренне сильно зависит от дерева пользовательского интерфейса DOM / HTML (см. Раздел Управление состоянием).

Попробуйте это вместо этого:

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

function App() {
  const [inputVal, setInputVal] = useState("");  // initialize as empty string.
  const [showDiv, setShowDiv] = useState(false);

  const changeDivFunc = () => {
    setShowDiv(true);
  };

  const getInputVal = (event) => {  // The arg is Event object, not val
    setInputVal(event.target.value);
  };

  const alertVal = () => {
    alert(inputVal);
  };

  return (
    <div className="App">
      <h1>Example</h1>
      <br />
      <button onClick={changeDivFunc}>Change Div</button>
      {
        showDiv? (
          <div>
            <p style={{ color: "red" }}>
               Hello World. This is updated "Show Div" value
            </p>
            <input value={inputVal} onChange={getInputVal} type="text" />
            <br />
            <br />
            <button onClick={alertVal}>Show Input Value</button>
          </div>
        ) : (
          <div>
            <p>Hello world. This is default "Show Div" value</p>
          </div>
        )
      }
    </div>
  );
}

export default App;
 

Разветвленный Codepen