Javascript 反应：获取输入[type=text]的值并输出该值

一般来说，我对React&JavaScript非常陌生，需要一些帮助来完成一件相当简单的事情：

我想通过点击更新按钮将输入值从我的文本

输出到我的

。（如果不起作用，也可以做类似的事情）

返回(
进步
进展：43%
进度（单位：%）
使现代化
);

---

非常感谢你的帮助

创建一些进度状态，并使用表单的

onSubmit

回调来更新状态并清除输入值。将进度状态呈现到

h4

标记中

function App() {
  const [progress, setProgress] = useState(43); // <-- progress state

  return (
    <div>
      <div className="top-menu">
        <div>
          <h1>Progress</h1>
        </div>
      </div>

      <div className="progress-container">
        <h4>Progress: {progress} %</h4> // <-- render progress state
        <div className="progress-bar"></div>
      </div>

      <div className="inputs">
        <label>Progress (in %)</label>
        <div className="input">
          <form onSubmit={e => { // <-- form submit callback
            e.preventDefault(); // prevent default form action so page doesn't reload
            const { value } = e.target.progress;
            setProgress(value); // update state
            e.target.progress.value = ''; // reset input value
          }}>
            <input id="progress" type="text" placeholder="e.g. 75"></input>
            <button type="submit" className="button">Update</button> // <-- type = submit
          </form>
        </div>
      </div>
    </div>
  );
}

函数应用程序（）{
const[progress，setProgress]=useState（43）；//创建一些进度状态，并使用表单的
onSubmit
回调更新状态并清除输入值。将进度状态呈现到
h4
标记中

function App() {
  const [progress, setProgress] = useState(43); // <-- progress state

  return (
    <div>
      <div className="top-menu">
        <div>
          <h1>Progress</h1>
        </div>
      </div>

      <div className="progress-container">
        <h4>Progress: {progress} %</h4> // <-- render progress state
        <div className="progress-bar"></div>
      </div>

      <div className="inputs">
        <label>Progress (in %)</label>
        <div className="input">
          <form onSubmit={e => { // <-- form submit callback
            e.preventDefault(); // prevent default form action so page doesn't reload
            const { value } = e.target.progress;
            setProgress(value); // update state
            e.target.progress.value = ''; // reset input value
          }}>
            <input id="progress" type="text" placeholder="e.g. 75"></input>
            <button type="submit" className="button">Update</button> // <-- type = submit
          </form>
        </div>
      </div>
    </div>
  );
}

函数应用程序（）{
const[progress，setProgress]=useState（43）；//最好的方法是通过在
input
元素上设置props
value
和
onChange
来控制组件状态中
input
的值。阅读“受控输入”事实上，我更喜欢Drew的答案，因为你说你只想在按下按钮后更新。最好的方法是通过在
input
元素上设置props
value
和
onChange
来控制组件状态下
input
的值。阅读“受控输入”.实际上我更喜欢Drew的答案，因为你说你只想在按下按钮后更新。