如何使用reactjs中的提交按钮获取输入并在html中显示

在ReactJS中，可以通过以下步骤使用提交按钮获取输入并在HTML中显示：

1. 首先，确保已经安装了ReactJS和相关的依赖。
2. 创建一个React组件，可以命名为Form，用于包含输入框和提交按钮。
3. 在Form组件的构造函数中，初始化一个状态变量，用于存储输入的值。可以使用useState钩子函数来实现：

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  // 其他代码...

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleSubmit}>提交</button>
      <p>{inputValue}</p>
    </div>
  );
}

export default Form;

1. 在输入框中，使用value属性绑定状态变量inputValue，并通过onChange事件监听输入框的变化，将输入的值更新到状态变量中。
2. 在提交按钮上，使用onClick事件监听点击事件，并调用handleSubmit函数。
3. 在handleSubmit函数中，可以对输入的值进行处理，例如发送到服务器进行保存或进行其他操作。在这个例子中，我们只是简单地将输入的值显示在<p>标签中。
4. 最后，将Form组件渲染到HTML页面的某个元素中：

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './Form';

ReactDOM.render(<Form />, document.getElementById('root'));

这样，当用户在输入框中输入内容后，点击提交按钮，输入的值将会在HTML页面中显示出来。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活调整配置，支持多种操作系统和应用场景。了解更多信息，请访问腾讯云云服务器。
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于图片、音视频、文档等各种类型的数据存储和管理。了解更多信息，请访问腾讯云对象存储。