Question

我想知道如何打印我在文本字段中输入的值。这是我的代码，一切正常，但我希望将输入的值打印在文本字段下的屏幕上，而不是 console.log()；

import { useRef } from "react";
function About() {
  const inputRef = useRef();
  const naglowek = "Hello";
  function clickHandler() {
    alert("Clicked");
  }
  function handleClick() {
    console.log(inputRef.current.value); // I want this to be printed on page under the input textfield
    document.getElementById("textfield1").value = "";
  }

  return (
    <div className="App">
      <h1>{naglowek}</h1>
      <button onClick={clickHandler}>Kliknij</button>
      <input id="textfield1" type="text" ref={inputRef} />
      <input type="button" value="tekst" onClick={handleClick} />
    </div>
  );
}

export default About;

Answer 1

根本不需要useRef。只需创建一个将跟踪输入值的本地状态。

const [currentValue, setCurrentValue] = useState();
const [isValueShown, showValue] = useState(false);

在输入中添加 onChange：

<input id="textfield1" type="text" onChange={handleChange} />
{isValueShown && <label for="textfield1">{currentValue}</label>}

句柄变更：

const handleChange = (e) => {
  setCurrentValue(e.target.value)
};

显示：

const handleClick = () => {
    showValue(true);
}

Answer 2

useRef() 不会触发重新渲染，它用于保留值。 useRef() 的理想用例是获取底层 dom 节点。这样我们就可以访问dom节点并修改其属性。您在这里需要的是一个受控组件。

我们在这里使用 useState 钩子的原因是为了触发重新渲染，以便 UI 与组件状态同步。并且建议在一段时间内通过某些副作用（例如 API 调用）或在这种情况下使用交互来使状态值发生变化。

import { useState } from "react";
function About() {
  const [value, setValue] = useState('');
  const [ showValue, setShowValue ] = useState(false);
 
  function clickHandler() {
    alert("Clicked");
  }

  function handleClick() {
   setShowValue(currentShowValue => !currentShowValue)
  }

  return (
    <div className="App">
      <h1>{naglowek}</h1>
      <button onClick={clickHandler}>Kliknij</button>
      <input id="textfield1" value={value} type="text" onChange={(e) => setValue(e.target.value) }/>
      <input type="button" value="tekst" onClick={handleClick} />
      <p>The value gets rendered as you type: {value}</p>
      {showValue && <p> The value gets rendered onClick: {value}</p>}
    </div>
  );
}

export default About;

参考

Controlled Components

Answer 3

import { useState, useEffect } from "react";
function About() {
  const [text, setText] = useState('');
  const [showValue, setShowValue] = useState(false);
  const naglowek = "Hello";
  let inputField;

  function clickHandler() {
    alert("Clicked");
  }

  //  Show the value on click
  function handleClick() {
    setShowValue(true);
  }

  // Store & Update the value on change
  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div className="App">
      <h1>{naglowek}</h1>
      <button onClick={clickHandler}>Kliknij</button>
      <input id="textfield1" type="text" onChange={handleChange} />
      {showValue && text}
      <input type="button" value="tekst" onClick={handleClick} />
    </div>
  );
}

export default About;

https://codesandbox.io/embed/reverent-smoke-4wjh1aa

如何在页面上打印输入，文本字段下的onClick

3 个答案: