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

我想知道如何打印我在textfield中输入的值。 这是我的代码，很好，但是我不希望使用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;

从“react”导入{useRef}；
函数About（）{
const inputRef=useRef（）；
const naglowek=“你好”；
函数clickHandler（）{
警报（“点击”）；
}
函数handleClick（）{
console.log（inputRef.current.value）；//我希望将其打印在第页的输入文本字段下
document.getElementById（“textfield1”）.value=“”；
}
返回(
{naglowek}
克里克尼
);
}
导出默认值约为；

根本不需要

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 handleClick = () => {
    showValue(true);
}

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

我们在这里使用

useState

hook的原因是触发重新渲染，以便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;

从“react”导入{useState}；
函数About（）{
const[value，setValue]=使用状态（“”）；
const[showValue，setShowValue]=使用状态（false）；
函数clickHandler（）{
警报（“点击”）；
}
函数handleClick（）{
setShowValue（currentShowValue=>！currentShowValue）
}
返回(
{naglowek}
克里克尼
setValue（e.target.value）}/>
值在键入时呈现：{value}

{showValue&&单击时呈现值：{value}
}
);
}
导出默认值约为；

参考

从“react”导入{useState，useffect}；
函数About（）{
const[text，setText]=useState（“”）；
const[showValue，setShowValue]=使用状态（false）；
const naglowek=“你好”；
让输入字段；
函数clickHandler（）{
警报（“点击”）；
}
//单击时显示值
函数handleClick（）{
设置显示值（真）；
}
//在更改时存储并更新值
函数句柄更改（事件）{
setText（event.target.value）；
}
返回(
{naglowek}
克里克尼
{showValue&&text}
);
}
导出默认值约为；

---

但我希望它打印在第页上，而不是打印在第页上console@mkl1337更新

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;

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;