在react js中提交时从自定义元素中读取值_如何从React JS中的重复元素中获取值_在React js中从文本编辑器中获取值 - 腾讯云开发者社区

在React.js中，要从自定义元素中读取值并进行提交，需要通过以下步骤：

创建一个自定义元素（也称为组件），可以使用React的createClass方法或ES6的类来定义组件。例如，可以创建一个名为CustomInput的组件。

import React from 'react';

class CustomInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)} />
    );
  }
}

export default CustomInput;

在上面的代码中，CustomInput组件包含一个输入框，并通过state来保存输入框的值。通过onChange事件，可以在用户输入时更新state中的值。

在父组件中使用自定义元素。假设父组件是一个表单组件，需要从CustomInput组件中获取输入值并进行提交。

import React from 'react';
import CustomInput from './CustomInput';

class Form extends React.Component {
  handleSubmit(event) {
    event.preventDefault();
    // 在这里获取CustomInput组件的值，并进行提交逻辑
    console.log(this.customInput.state.value);
    // 进行提交逻辑...
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
        <CustomInput ref={(input) => { this.customInput = input; }} />
        <button type="submit">提交</button>
      </form>
    );
  }
}

export default Form;

在上面的代码中，Form组件包含一个表单，并在handleSubmit方法中获取CustomInput组件的值进行提交。通过使用ref属性，可以在父组件中引用CustomInput组件的实例，然后通过this.customInput来获取其值。

这样，在用户点击提交按钮时，就可以通过this.customInput.state.value获取CustomInput组件中输入框的值，并进行相应的提交逻辑。

这种方式可以应用于各种场景，例如登录表单、搜索表单等等。

关于React.js的更多内容，您可以参考腾讯云的产品React Serverless组件（https://cloud.tencent.com/product/scc）来部署React.js应用。React Serverless是一个Serverless Framework插件，用于在云上部署和管理React.js应用。通过该链接，您可以了解到React Serverless的功能、特点以及部署步骤等详细信息。