？如何从功能组件React中获取表单值？
从React的功能组件中获取表单值有多种方法，具体取决于表单的类型和需求。
- 使用受控组件： 受控组件是指将表单的值与组件的state绑定，并通过onChange事件更新state的值。可以使用event.target.value来获取输入框的值。
import React, { useState } from 'react';
function MyForm() {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (event) => {
setInputValue(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
console.log('表单提交的值：', inputValue);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={inputValue} onChange={handleInputChange} />
<button type="submit">提交</button>
</form>
);
}- 使用非受控组件： 非受控组件是指表单的值不受React的state管理，通过ref来获取表单的值。
import React, { useRef } from 'react';
function MyForm() {
const inputRef = useRef();
const handleSubmit = (event) => {
event.preventDefault();
console.log('表单提交的值：', inputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" ref={inputRef} />
<button type="submit">提交</button>
</form>
);
}以上是两种常见的获取表单值的方法，根据具体的情况选择合适的方式。
相关·内容
我刚开始使用React.FC，并且一直在使用redux，所以我不熟悉React本身的生命周期，但是由于项目限制，所以请帮帮我。
我有一个表单作为React.FC组件，它将用于创建新的内容和编辑时，控制父状态下默认值的默认值，并将它们作为支持传递下来。
export const Form: React.FC<Props> = props => {
const [title, setTitle] = React.useState(props.defaultValues.title)
const onChangeTitle = (event: React.ChangeE
浏览 3提问于2021-01-12得票数 1
回答已采纳
I通过映射在react中显示多个表单，而submit按钮在父组件中，如何获取表单提交上映射的所有表单的值？
下面是我的父组件代码：
<form>
{rowdata.map((item, index) => <ChildForm key={index} {...this.state} />)}
<Button type="submit" className="primarybtn btnsmall"/>
</form>
浏览 1提问于2020-04-13得票数 0
我正在使用react钩子表单，并尝试设置表单的默认值，该表单通过在数组上进行映射并在表单中输出输入来输出。我已经将数组简化为一个类似于此{name0:"fijs"，name1:"3838"...}的对象，如果我手动将其作为默认值传递，它将映射到我的输入并填充它们。但是，如果我从执行reduce函数的变量输入它们，它不会填充它。我认为这是因为在第一次渲染时它是未定义的。我试过使用useEffect，但它不起作用，所以我被卡住了。 这是我正在编写的代码的一部分 这就是整件事 更新:我已经尝试了从应用程序接口重置useEffect，我认为这是解决方案，但仍然没有骰子
浏览 28提问于2021-02-28得票数 1
回答已采纳
如何从React Native (v0.5.0)中的组件获取DOM节点？根据下面的代码片段，"this.refs.abc“没有"getDOMNode( )”方法。此外，"findDOMNode()“在React模块中不可用。(最终，我尝试找出组件的DOM元素的维度)。
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
TouchableHighlight,
View,
} = React;
浏览 0提问于2015-06-16得票数 1
我是reactJS的新手，我想知道如何呈现这个： 我有一个表单与3过滤器(下拉列表)，但这些下拉列表是通过数据库填充。这是我尝试过的： import React, {Component} from 'react';
import axios from "axios";
export default class Filter extends Component {
constructor(props) {
super(props);
this.state = {rarity: [], typpeequipement:
浏览 29提问于2019-01-11得票数 0
回答已采纳
我创建了一个名为TagsInput的自定义组件，并将其添加到表单中。我的问题是，在提交表单时，字段tags的值始终是未定义的，因为Form.Item无法从TagsInput子级中检索该值。当Form.Item的子组件是antd组件时，这通常不是问题。 export default function NewProjectForm(props) {
return (
<Form layout="vertical" onFinish={props.onSubmit} id="newProjectForm">
<Form
浏览 22提问于2020-07-24得票数 2
回答已采纳
1回答
谁知道如何使它成为一个react引导表-next有一个删除和添加行功能？我在他们的文档里找不到任何东西：
最终希望使用axios将数据从NoSQL数据库导入到表中，然后让人编辑表中的数据并将其推送到数据库中。
这是我在StackOverflow上的第一个问题，任何贴士都很感激。
这是我到目前为止得到的。它成功地呈现了一个简单的表。
import BootstrapTable from "react-bootstrap-table-next";
import React, { Component } from "react";
const products
浏览 0提问于2018-07-29得票数 1
2回答
如何在React中处理AJAX请求？React本身并不支持任何特定的数据获取方式。react中的哪个钩子最适合获取数据构造函数、componentdidmount或具有自定义钩子静态方法。
浏览 1提问于2017-05-01得票数 0
2回答
为什么选择的选项隐藏在反应中？
、、、、
我用react材料做了一个表单的简单演示，其中只有一个select字段，.I使用这个链接使用api使select选项能够在顶部显示标签(使用这个shrink={true})，并使用这个displayEmpty显示禁用的值。所以我的表单看起来像这样，没有任何验证
现在我尝试使用这个插件来验证我的表单，但是我的默认选项是隐藏的，选择框标签看起来也很尴尬，并且变得很小。
这是我的代码
import ReactDOM from "react-dom";
import React from "react";
import PropTypes from "prop-
浏览 0提问于2018-09-07得票数 2
3回答
我在React.js中对表单使用Redux表单，我的表单曾经是，我有一个定制的google地图组件，我想将lat和long绑定到我的表单上。
表单
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const SimpleForm = props => {
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handle
浏览 0提问于2018-07-05得票数 11
回答已采纳
1回答
使用React阿波罗客户端处理表单状态管理的最常规方法是什么？有太多的基本阿波罗查询和简单的待办应用程序的演练，但我没有看到任何一个演示如何处理现实的形式。
想象三个不同的用户流：
编辑现有实体(更新表单)
通过添加/删除元素(更新表单)编辑集合
创建一个新实体(创建表单)
似乎有几种解决办法：
使用有状态的React组件。有状态表单嵌套在<Query />和<Mutation />中，或者可以访问data和mutate。在提交时，直接使用mutate函数提交突变，并(如果必要的话)在成功时手动更新缓存。它可以工作，但需要一个更复杂的有状态组件。
浏览 2提问于2018-10-21得票数 1
回答已采纳
在关于Redux的几个教程之后，我刚刚开始尝试react，并且在控制台中得到了一个错误：
警告:不能给无状态函数组件参考(参见Login创建的FieldGroup中的参考“用户名”)。访问此引用的尝试将失败。
将表单字段输入值传递给我的提交按钮的正确方法是什么？这些值应该进入redux商店吗？在阅读了docs：之后，在这种情况下，我似乎应该避免引用。因此，如果没有参考资料，我如何将输入值输入到submit按钮？谢谢你的帮助。
Login.jsx
import React, {Component, PropTypes} from 'react';
import {Row,
浏览 0提问于2017-10-13得票数 1
回答已采纳
我试图在react的表格中制作粘性标题，为了做到这一点，复制了表格标题，并使容器相对于表格div的绝对位置。但问题是表单元格的宽度并不相同。我想要获取表中每一列的宽度，并设置粘性标题列的宽度，使它们相同。渲染后如何操作？
代码结构如下：
<div className="tableDataContainer">
<div className="stickyHeader">
<Table>
<TableHead></TableHead>
<
浏览 76提问于2021-05-14得票数 2
我有一个页面，其中一个表单呈现在服务器上，它处理验证和选择值的正确性。
我想隐藏该表单的DOM，并将其附加到react组件中，以便在react-router中使用它。
const NewItem = React.createClass({
render() {
return (
<div>
<h1>New item</h1>
{/* I WAN
浏览 1提问于2015-09-30得票数 5
回答已采纳
1回答
我有两个反应组件，它们具有相同的表单字段。如果选中另一个组件中的表单中的输入，则有一个复选框应该将其镜像。
相同的概念与“相同的地址与计费”功能，但表单是在不同的组成部分。
我正在尝试使用React表单的"watch“，但我不确定如何将输入从Component: FormOne传递到Component: FormTwo。
这是我的代码：
浏览 2提问于2021-09-08得票数 1
回答已采纳
1回答
以形式从api中获取值
、、、
我使用的是React表单，所以我关心的是如何将数据设置为react表单中的输入字段，以便发布我的结构类似的数据
<form onSubmit={handleSubmit(onSubmit)}>
<IonItem>
<IonLabel position="stacked">Full Name</IonLabel>
<Controller
render={({ onChange, onBl
浏览 10提问于2020-09-10得票数 1
我有一个表单组件，用于将数据发送到pg数据库。
这是我的表单脚本：
import bodyParser from 'body-parser';
import React, { Fragment, useState } from 'react';
import RatingStar from '../components/rating'
const InputData = () => {
const [name, setName] = useState('')
const [rating, setR
浏览 3提问于2021-06-07得票数 3
回答已采纳
当我从子组件提交表单时，如何更新定义了父contex api的类的状态？
import React, {createContext,Component} from 'react'
import http from './services/httpService'
import {MyApiUrl} from './services/httpService'
export const GlobalState = createContext()
export class DataProvider extends Component{
浏览 4提问于2021-11-03得票数 0
我是一个新的原生反应，我有一个项目在5天内到期。我找不到在原生react中创建表单并提交它的方法。我需要保存表单的值并在API主体中发送它们。谢谢你的帮助！
浏览 16提问于2020-09-18得票数 0
如何填充React Formik窗体？例如，要编辑记录，请先将现有数据填充到字段中。
我试过这样的方法：
componentDidMount(){
...
// get data from api call,
this.username = ...
this.email = ...
}
render(){
return(
<Formik initialValues={{ username: this.username, email: this.email }}
)
}
但是表单总是变成空的。我猜这也是因为render是在componentDid
浏览 0提问于2019-07-23得票数 4
1回答
我从NB3.0复制/粘贴了React表单的第一个示例，并得到了这个错误。TypeError:错误不是一个对象。(在错误中评估‘firstName’)。知道为什么吗？
浏览 5提问于2021-07-08得票数 0
请帮助理解react-final-form的api文档，
我们已经将redux-form迁移到了redux-final-form。在我的应用程序中，我们使用formvalueselector api来获取表单值。请帮助在react-final-form中获得更纤细的api
要求是通过属性名称获取表单值
浏览 28提问于2020-05-06得票数 1
1回答
我想在react表单中使用Autocomplete，它应该能够选择多个值。提交表单后，当我单击编辑按钮时，我提交的值应该会显示在自动完成组件中。这应该适用于不同的用户，根据他们的名字。
我该怎么做呢？
浏览 0提问于2021-07-06得票数 0
我一直试图理解react的useState钩子的工作原理，但是我无法理解它是如何实现的，比如在这个JavaScript代码中。
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
function onClick()
{setCount(2)
}
return (
浏览 6提问于2021-07-29得票数 0
回答已采纳
在下面的示例中，如何从MyComponent在Enhance中获取呈现的div的DOM节点？
Enhance.js
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
浏览 3提问于2016-09-25得票数 6
回答已采纳
我有一个MUI自动完成在一个表单中，它在填充表单时工作得很好，但是当我想显示被获取的数据填充的表单时，MUI自动完成只在两次呈现后显示选定的选项。
我认为这与useEffect和reset有关，因为自动完成的选项是静态的，但是我还必须从API中获取的选项只有在第二次运行useEffect之后才能正常工作。
我无法复制代码框，因为它是一个消耗真正api的大型项目，但如果需要，我可以提供更多的信息。如果有人能帮我做这件事，请提前感谢。
在表单中选择要可视化的项的页面：
const People: React.FC = () => {
const [show, setShow] = us
浏览 2提问于2021-08-02得票数 0
回答已采纳
我对React世界很陌生，对于组件的使用，我有一个潜在的问题，我有一个从App.js render()调用的Login组件。
Login.js有一个fetch() api，用于获取form上键入的任何内容的响应。
预期结果--一次调用fetch api时，单击表单中的submit按钮，然后登录。
实际结果- fetch api被多次调用，当我填充表单时，从开始在表单上键入开始，在完成输入username和password之后，完整的结果就会成功，而submit按钮似乎没有任何影响。
关于我所采取的上述行为的相关守则：
下面看到的useform.js是我正在使用的钩子。
App.js
impor
浏览 0提问于2020-03-05得票数 0
回答已采纳
我的react-bootstrap-typeahead设置如下： // MusicServices.jsx
import React, {Fragment, useState} from 'react';
import { Form } from 'react-bootstrap';
import { Typeahead } from 'react-bootstrap-typeahead';
const MusicServices = ({services}) => {
const [musicServiceID, setMusic
浏览 20提问于2020-08-28得票数 1
回答已采纳
特别是我对react和react-admin是个新手。
我正在尝试将Datagrid嵌入到Edit表单中。
API props (record)有一个对象的子数组，所以我不需要使用ReferenceManyField或类似的东西从Edit加载相关记录。
但是我似乎找不到如何引用记录的数组作为列表的ListProp
如果任何人有任何例子，那将是很好的。
谢谢
浏览 0提问于2020-11-24得票数 0
我正在使用ReactJS和上下文-API开发一个购物车应用程序，到目前为止，我实现了以下目标：
从Firebase加载我的产品，将产品添加到cart
下一步是显示购物车在用户单击适当图标时加载模式表单的内容，但在本部分中，我得到了以下错误：
目标容器不是DOM元素
这是来自FoodOrder的代码，这是最重要的代码之一：
import React, { useState } from "react";
import Header from "./Layout/Header";
import Meals from "./Meals/Meals&#
浏览 13提问于2022-04-14得票数 0
我有一个非常基本的评论表单，它从用户那里获取一些文本输入，并通过AJAX发送一个POST请求来创建新的评论。
var CommentForm = React.createClass({
propTypes: {
// ...
// ...
},
handleFormSubmit: function(e) {
e.preventDefault();
var component = this;
return $.ajax({
type: "POST",
url: this.props.someURL,
浏览 0提问于2016-08-14得票数 6
回答已采纳
2回答
我有一个表单，它是使用formik和react-hooks编写的。我正在尝试获得有关如何在用户单击主页按钮或页面刷新/重新加载时跟踪表单更改的建议？
我已经尝试过，浏览器历史方法触发一个模式，以显示未保存的更改const unlisten = browserHistory.listen( location => { //trigger modal here });，但这似乎不起作用。此外，我正在使用react-router...如果有任何建议，使用它将是有帮助的。我已经完成了使用useState和setState将表单值存储到状态中，我有一
浏览 26提问于2019-07-21得票数 0
1回答
大家好，我正在努力学习ReactJS，我想知道为什么每个人都在使用标记来构建表单。
我是说当我使用这个代码时：
import { TextInput, Form, View } from 'react-native'
<Form onSubmit={this.onSubmit}>
<TextInput/>
</Form>
我发现了一个错误：
元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got:未定义。您可能忘记从定义在其中的文件中导出组件。
或者当我使用这个代码时：
impo
浏览 1提问于2017-09-12得票数 0
回答已采纳
我正在用react构建一个表单，并希望在提交后自动聚焦于第一个无效字段。为此，我需要访问无效字段的引用并对其调用.focus()。我的问题是，在构造函数中存储多个引用是更好(性能更好)，还是只将ID附加到每个字段并查询DOM来获取引用。
constructor(props) {
super(props);
this.state = this.props.entry;
this.submitForm = this.submitForm.bind(this);
this.field1 = React.createRef();
this.field2 = Re
浏览 2提问于2018-10-05得票数 2
我对反应和酒瓶很陌生。我正在尝试构建一个react表单，允许用户使用Flask框架在SQL数据库中搜索一个人。我有不同的部分，但不知道如何让用户输入一个搜索词-任何帮助将不胜感激！提前谢谢你！
到目前为止，我的app.py看起来如下：
from flask import Flask, jsonify
import mysql.connector
app = Flask(__name__)
port = 5000
connection = mysql.connector.connect(
host='localhost',
database='data
浏览 3提问于2022-05-17得票数 0
我想在成功提交后重置我的表单，我尝试了reduxForm指南中提到的' reset‘调度，但没有得到任何幸运，问题是我没有得到在我的表单中添加'reset’的点，下面是我的代码块：
import React from 'react';
import DCTLeft from './DctLeft'
import DCTRight from './DctRight';
import DCTForm from './dctForm';
import { sendNewMessage } from '../../
浏览 10提问于2019-07-12得票数 0
回答已采纳
我使用react JsonSchema - form 1.2.1构建基于JsonSchema (v7)的表单。当用户按下表单上的提交时，我希望自动从某些文本框输入字段中修剪前导和尾随空格。由于表单完全由react jsonschema- form模块的<Form>元素呈现，所以我不知道如何使用JavaScript代码来实现这一点。
react jsonschema-form有trim功能吗？
提前感谢！
浏览 0提问于2019-05-09得票数 1
我试图从GitHub用户API中获取数据，并将JSON存储在数组中，然后循环遍历该数组，然后在提交表单时动态创建Card组件，但是Card组件不会呈现，即使该数组是用新添加的用户更新的。
在提交有效表单之前和之后，我在dev控制台上添加了相关的代码文件和React组件树的图像。谢谢。
App.js
import React from "react";
import Form from "./Form";
import Cardlist from "./Cardlist";
import ProfileData from "../JSON&
浏览 3提问于2021-03-29得票数 0
我们有一个表单，这是反应最终的形式，并希望在该表单中的选择和创建字段。 我如何在react最终表单中使用这样的组件。 目前我尝试在表单中使用react-select的Select.Creatable，但是一旦我从下拉列表中选择了一些东西并更新了状态，表单就变得清晰了，即回到了它的初始状态。 请帮帮忙！
浏览 10提问于2019-06-14得票数 1
回答已采纳
1回答
我正在研究修复代码中的错误。有一个包含多个表单域的表单。Project Name就是其中之一。当用户单击按钮(加号图标)时，it.So旁边有一个按钮，弹出窗口，用户输入Project Name和Description并点击submit按钮保存项目。表单有Submit、Reset和Cancel按钮(为了简洁起见，代码中没有显示)。
表单的项目名称字段具有自动建议功能。下面的代码片段显示了项目名称field.So表单的一部分，当用户开始键入时，它显示了项目列表，用户可以从列表中进行选择。
<div id="formDiv">
<Gr
浏览 17提问于2021-03-04得票数 0
回答已采纳
目前，我正在处理一个使用react钩子表单的表单，我希望将用户的输入保存在本地存储中。此时，每当我更改从本地存储加载的输入值时，输入都不会改变。 当我从onchange方法console.log事件时，我没有得到日志，所以它没有触发onchange，这就是我的问题所在。我希望当用户想要更改表单中的任何内容时，它应该再次更新。 我已经在谷歌上搜索过了，但我找不到任何相关的问题，所以也没有解决方案。由于我是react的初学者，我没有自己解决它的线索。 onchange函数在一个功能组件中，与输入组件相同，只是功能组件。 这是包含输入事件的onchange函数。 const onChange =
浏览 19提问于2020-06-09得票数 0
2回答
这是我的反应元件
import React, { Component } from 'react';
import categories from './categories.json'
import './content.css'
export default class Content extends Component {
constructor(props) {
super(props)
this.state = {
searchText: '',
浏览 4提问于2017-12-16得票数 0
回答已采纳
我正在使用，我非常喜欢它，它让学习React和Redux的任务变得容易得多，但它对如何组织事物的观点有点固执己见，这让我想知道在一个应用的两个不同功能之间共享状态的最佳实践是什么(例如，登录的用户，可能还有其他一些数据)。
我可以去localStorage，但这似乎与Redux是“真相来源”的想法背道而驰。
感谢您的帮助。
浏览 1提问于2018-05-28得票数 0
PhantomJS将抛出：
未定义不是对象(计算'Component.contextTypes')
我的组件是
import React, {Component, PropTypes} from 'react'
export default class InputText extends Component {
constructor (props, context) {
super(props, context)
this.state = {}
}
render () {
浏览 6提问于2016-11-17得票数 1
我正在尝试创建一个简单的antd表单，但不知道如何使getFieldDecorator与我的react函数一起工作。如何将this.props.form转换为react钩子方法？这是antd文档中的类语法。 function FormDrawerButton () {
// ToggleDrawer
const [visible, setVisible] = useState(false);
const toggleDrawer = () => {
setVisible(!visible)
}
const { getFieldDecorator } =
浏览 34提问于2019-10-10得票数 1
回答已采纳
嘿，我有一个问题，我们怎样才能从url那里捕捉到id onProductClick = item => {
this.props.history.push(`/product/${item.id}`);
}; 如何将即将到来的id从url赋值给react中的变量 这就是我计划去抓id估值员的地方。 class ProductView extends React.Component {
componentDidMount() {
let someVar = this.props.location.pathname.split('/').pop()
cons
浏览 45提问于2019-03-14得票数 2
回答已采纳
1回答
我需要建议和帮助，如何使用文本从输入形式作为输入的axios请求的反应本机。
现在，我正在向我的应用程序中添加一个SignIn屏幕。要检索我的应用程序的任何API，都需要令牌。在此之前，我只是使用redux创建了一个操作文件，以获取令牌并将其存储在还原器中。
在这种情况下，我尝试从表单输入中使用email和password，同时将其作为数据登录以供我检索令牌。长话短说，这是我现在的代码SignInScreen.js
import React, { Component, AsyncStorage } from 'react';
import { View, Text } from
浏览 0提问于2017-11-24得票数 0
回答已采纳
我看过詹姆斯·纳尔逊的系列。本系列文章介绍了一个用React实现的表单，并展示了输入字段是有效的只读的，然后继续解释如何正确地更改值。这不是一个如何这样做的问题。相反，我想了解反应如何阻止价值观的改变。
下面的代码(也是中的)是一个SSCCE：
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src
浏览 2提问于2016-03-28得票数 4
您好，我正在使用这个包作为组件，它是shwos和get vlaues，但是我如何从根组件中获取输入值。 在根页面中 从'../../components/AnimatedVerification/AnimatedVerification'；导入AnimatedVerification 在这段代码中，所有的代码都来自这个示例 我只想从根组件中获得这4个数值，如何制作它。谢谢 Expo ? /* */
import {Animated, Image, SafeAreaView, Text, View} from 'react-native';
import
浏览 11提问于2021-02-04得票数 0
1回答
我使用React已经有一段时间了，我对学习和采用Relay.js感到非常兴奋。我很难找到一种方法来保持组件在多个项目中的可重用性，并且仍然使用Relay。我能够将组件从Relay容器中分离出来。我觉得这是正确的选择。请看下面的内容。
React组件
import React from 'react';
class ItemList extends React.Component {
createList(item) {
return (
<li id={item.node.id} key={
浏览 0提问于2016-05-11得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
