React：获取 input[type=text] 的值并输出该值答案

【问题标题】：React: Get value of input[type=text] and output the valueReact：获取 input[type=text] 的值并输出该值
【发布时间】：2020-10-26 08:55:57
【问题描述】：

总的来说，我对 React 和 JavaScript 还是很陌生，可以在一个相当简单的事情上使用一些帮助：

我想通过点击更新按钮将输入值从我的文本<input> 输出到我的<h4>。（或者类似的东西，如果这不起作用）

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

            <div className="progress-container">
                <h4>Progress: 43 %</h4>
                <div className="progress-bar"></div>
            </div>

            <div className="inputs">
                <label>Progress (in %)</label>
                <div className="input">
                    <form>
                        <input id="progress" type="text" placeholder="e.g. 75" />
                        <button className="button">Update</button>
                    </form>
                </div>
            </div>
        </div>
    );

非常感谢您的帮助！

【问题讨论】：

最好的方法是通过在input 元素上设置属性value 和onChange 来控制组件状态中input 的值。阅读有关制作“受控输入”的内容。
其实我更喜欢 Drew 的回答，因为你说你只想在按下按钮后更新。

标签： javascript reactjs

【解决方案1】：

创建一些进度状态并使用表单的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>
  );
}

【讨论】：