无法获取React表单值
React表单值是指在React应用中获取表单元素的值。在React中，可以通过使用受控组件或非受控组件的方式来获取表单值。
- 受控组件： 受控组件是指将表单元素的值与React组件的状态进行绑定，通过事件处理函数来更新状态，从而实时获取表单的值。具体步骤如下：
- 在组件的状态中定义一个属性来存储表单的值。
- 在表单元素上设置value属性，将其值与状态中的属性绑定。
- 为表单元素添加onChange事件处理函数，该函数会在表单值发生变化时更新状态中的属性。
示例代码：
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
};
}
handleChange(event) {
this.setState({ inputValue: event.target.value });
}
handleSubmit(event) {
event.preventDefault();
console.log('Form submitted with value: ', this.state.inputValue);
}
render() {
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<input type="text" value={this.state.inputValue} onChange={this.handleChange.bind(this)} />
<button type="submit">Submit</button>
</form>
);
}
}推荐的腾讯云相关产品：无
- 非受控组件： 非受控组件是指表单元素的值不受React组件状态的控制，而是通过ref来获取表单元素的值。具体步骤如下：
- 在表单元素上添加ref属性，并创建一个ref对象。
- 通过ref对象的current属性来获取表单元素的值。
示例代码：
class MyForm extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
handleSubmit(event) {
event.preventDefault();
console.log('Form submitted with value: ', this.inputRef.current.value);
}
render() {
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<input type="text" ref={this.inputRef} />
<button type="submit">Submit</button>
</form>
);
}
}推荐的腾讯云相关产品：无
总结： React表单值可以通过受控组件或非受控组件的方式来获取。受控组件通过将表单元素的值与组件状态进行绑定，实时获取表单的值；非受控组件通过ref来获取表单元素的值。根据具体需求选择适合的方式来获取React表单值。
相关·内容
我正在尝试在React Hook表单中使用MUI切换组，但是我无法在提交表单时获取要发布的值。我的切换组组件如下所示：
import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
浏览 15提问于2020-06-06得票数 0
回答已采纳
1回答
我很难使用Redux对象将默认值分配给Redux表单。
我正在使用react钩子形式，Redux工具包，和materiauli。看来问题出在materialui的TextField上，但我仍然无法解决它。
Initialization
const dispatch = useDispatch()
const category = useSelector(state => state.inventory.categories.category)
useEffect(() => {
dispatch(getCategoryData(id))
}, [])
React 的初始化
c
浏览 0提问于2020-08-14得票数 4
3回答
在表单验证之后，我无法读取属性ref。结果是undefined，我不明白为什么。
import React from 'react';
import {Link} from 'react-router-dom';
export default class Home extends React.Component {.
handleSubmit(e){
e.preventDefault();
console.log(e.name.value);
}
render() {
return (
<div>
浏览 0提问于2017-10-10得票数 1
我试图结合使用Formik和React的useRef钩子来创建对我的表单的引用，然后我可以访问该表单之外的引用。但是，无论我做什么，ref中的值从未像我期望的那样被更新。
我创建了一个演示这个问题的小例子。
import React, { useEffect, useRef, useMemo } from "react";
import { render } from "react-dom";
import { Formik } from "formik";
const App = () => {
const formRef = us
浏览 13提问于2021-12-27得票数 2
2回答
我有一个有状态的React组件，我想在状态对象中访问状态表单的值，特别是number_rows。 class Contracts extends React.Component{
constructor(props) {
super(props);
this.state = {
number_rows: 30, //starting default
data: props.data
.sort((a, b) => this.high_to_low(a, b, "latestVolume"))
浏览 23提问于2019-04-14得票数 1
回答已采纳
本质上，我有一个react日期选择器，作为redux表单字段合并到我的表单中。我允许用户使用redux-form reset prop清除整个表单。这很奇怪，因为datepicker在我的表单数据中是可以识别的，但是当我试图清除整个页面时，它是唯一没有清除的字段。
this.props.reset this.props.change
我的日期选择器：
const CustomInput = React.forwardRef((props, refs) => {
const inputProps = props.inputProps;
inputProps.input.on
浏览 8提问于2019-10-26得票数 0
请帮助理解react-final-form的api文档，
我们已经将redux-form迁移到了redux-final-form。在我的应用程序中，我们使用formvalueselector api来获取表单值。请帮助在react-final-form中获得更纤细的api
要求是通过属性名称获取表单值
浏览 28提问于2020-05-06得票数 1
1回答
我在表单中使用formik。在我的表单中，我需要使用FieldArray的概念，而且它是嵌套的。我无法用各自的值填充嵌套表单。我是这样做的：
const Itinerary = ({ itineraries, push, remove }) => {
return (
<>
<Heading>Itinerary</Heading>
{itineraries && itineraries.length === 0 && (
<span
style
浏览 8提问于2020-02-03得票数 6
回答已采纳
1回答
我一直在使用带有本机元素的react钩子形式库，但我想切换到使用Controller API的自定义组件。 我的自定义输入组件在更新React状态但不更新form状态内的ref时遇到问题。因此，必填字段始终标记为无效，并且我无法提交表单。 这是我的问题的一个演示：https://codesandbox.io/s/react-hook-form-controller-bofv5 它应该在提交时注销表单数据-但提交从不发生，因为表单无效。
浏览 11提问于2020-04-29得票数 3
回答已采纳
我创建了一个由几个组件组成的react formik表单。我需要将useFormik对象传递给表单的组件。formik的正确类型是什么？ 父窗体 const formik = useFormik({ ... 子组件 interface IAddressBoxProps {
skip: () => void
formik: any
}
const AddressBox: React.FC<IAddressBoxProps> = (props: IAddressBoxProps) => {
const { skip, formik } = props
.
浏览 35提问于2020-10-10得票数 2
2回答
我有一个 and表单，当我按下提交按钮时，就可以在onFinish function中获取表单数据，在该按钮中，我希望使用uesEffect hook，并将表单数据作为有效负载分派到redux中，但我得到了以下错误
React Hook "useEffect" is called in function "onFinish" that is neither a React function component nor a custom React Hook function.
如果我在onFinsh 函数之外编写useEffect钩子，则无法获得表单数据/值。
浏览 6提问于2021-01-20得票数 1
回答已采纳
我有一个MUI自动完成在一个表单中，它在填充表单时工作得很好，但是当我想显示被获取的数据填充的表单时，MUI自动完成只在两次呈现后显示选定的选项。
我认为这与useEffect和reset有关，因为自动完成的选项是静态的，但是我还必须从API中获取的选项只有在第二次运行useEffect之后才能正常工作。
我无法复制代码框，因为它是一个消耗真正api的大型项目，但如果需要，我可以提供更多的信息。如果有人能帮我做这件事，请提前感谢。
在表单中选择要可视化的项的页面：
const People: React.FC = () => {
const [show, setShow] = us
浏览 2提问于2021-08-02得票数 0
回答已采纳
我正在尝试将星号放在标签附近的一个表单上，该表单使用的是react最终形式，如下所示
<Field
name="requestDescription"
{...(<span style={{ color: 'red' }}>*</span>)}
component={AntdInputAdapter}
validate={required}
type="text&#
浏览 1提问于2020-03-22得票数 2
回答已采纳
1回答
我使用了(几乎)精确的语法来创建一个html表单：
var Hello = React.createClass({
render: function() {
return
<div>
<section>
<form action="http://localhost:9203/ask">
Text: <input type="text" name="text" value="Text
浏览 1提问于2015-06-17得票数 0
回答已采纳
我有一个组件，它有一个表单，您可以从该表单中选择三个选项。一旦选择了这些选项之一，就会在下面呈现子组件。此子组件需要根据输入从服务器获取数据。
我遇到的问题是，虽然我能够将数据向下传递给子组件，但除非我在父组件上选择默认选项，然后选择另一个值，否则子组件无法获取。
这是我的代码: codesandbox：
App.js
import React, { Component } from "react";
import ChildComponent from "./ChildComponent";
class App extends Component {
c
浏览 6提问于2020-08-13得票数 0
回答已采纳
2回答
我正在用react.js构建一个表单，并且有一个我似乎无法解决的问题。我在表单中为我的道具使用npm模块prop-types，并试图为单个输入设置一个inputType。我一直收到以下错误：
我的代码是：
import React from 'react';
import PropTypes from 'prop-types';
const SingleInput = (props) => (
<div className="form-group">
<label className=&
浏览 2提问于2017-11-07得票数 0
回答已采纳
1回答
react中的输入重置
、、、
我正在开发一个react应用程序。我说的是表单中的两个输入，提交表单后，我的字段不会重置。如何做到这些。我附上了我的表单组件代码，谁能帮我解决这个问题。
import React, { Component } from 'react';
class Form extends Component {
render() {
return (
<form onSubmit={this.props.getWeather}>
<input type="text" name="city"
浏览 12提问于2018-09-04得票数 1
回答已采纳
我使用的是react-jsonschema-form生成器和NJsonSchema。在提交表单之后，我记录json输出，并希望在任何时候使用表单对提交的数据进行编辑。但我无法找到一种方法，用提交的数据来创建表单。在尝试了一些json模式更新之后，我意识到json中的值键不是用来填充输入的。
"Age": {
"value": "34",
"type": "integer",
"format": "int32"
浏览 3提问于2020-11-10得票数 2
我有一个表单组件，用于将数据发送到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
回答已采纳
我是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
回答已采纳
2回答
我有一个表单，它是使用formik和react-hooks编写的。我正在尝试获得有关如何在用户单击主页按钮或页面刷新/重新加载时跟踪表单更改的建议？
我已经尝试过，浏览器历史方法触发一个模式，以显示未保存的更改const unlisten = browserHistory.listen( location => { //trigger modal here });，但这似乎不起作用。此外，我正在使用react-router...如果有任何建议，使用它将是有帮助的。我已经完成了使用useState和setState将表单值存储到状态中，我有一
浏览 26提问于2019-07-21得票数 0
2回答
我无法为多选择内部表单设置默认值。
用例：，我已经创建了一个react组件，它使用我在每个表单中需要的一些默认道具呈现一个select。现在，我希望为select的defaultValue支柱中的select设置默认值，而不是将initialValues传递给每个表单。
我的react组件看起来如下：
import React, { Component } from 'react';
import { Form, Select } from 'antd';
class FormSelect extends Component {
render() {
浏览 5提问于2019-12-25得票数 1
我正在创建一个包含富文本编辑器的React组件。我选择了react-draft-wysiwyg来编辑或创建文本，然后发送到服务器。我将在代码中只给出造成困难的功能。我使用axios发送请求。由于某些原因，我在发送POST请求时无法从表单中获得正确的数据。我使用命令进行了检查： console.log(data);
console.log(this.state.editorState); 但是现在在表单中输入了文本。我想弄清楚这一点，谢谢大家！ 代码如下： import React, { Component } from 'react';
import { EditorStat
浏览 41提问于2019-08-18得票数 0
回答已采纳
我尝试将表单的状态映射到LoginForm组件的属性，状态显示为undefined。
import React, { PropTypes } from 'react';
import { reduxForm, getFormValues } from 'redux-form/immutable';
import { connect } from 'react-redux';
import { logUserIn } from '../../actions/authentication';
import { VALID_EMAIL_
浏览 3提问于2017-03-08得票数 0
我是一个新的原生反应，我有一个项目在5天内到期。我找不到在原生react中创建表单并提交它的方法。我需要保存表单的值并在API主体中发送它们。谢谢你的帮助！
浏览 16提问于2020-09-18得票数 0
在仅使用React.js提交表单后，我尝试使用React本身的钩子重置我的输入字段。 下面是我的代码： import React, { useState } from 'react';
const Searchbar = (props) => {
const { updateSelectedCity } = props;
const [newCity, setCity] = useState("");
const handleChange = (e) => {
setCity(e.target.value
浏览 4提问于2020-07-18得票数 0
2回答
我正在尝试制作可重用的表单和输入组件，到目前为止，我已经做了以下工作：
表单
import React from 'react'
import classNames from 'classnames/bind'
import styles from './style.scss'
const cx = classNames.bind(styles)
export default class Form extends React.Component {
constructor (props) {
super(props)
th
浏览 2提问于2016-06-29得票数 0
回答已采纳
我在javascript中有一个简单的React表单，但我似乎无法正常工作。它非常简单，但不会加载到浏览器中。 import React from 'react';
import { render } from 'react-dom';
function signUp() {
function handle () {console.log(document.getElementById('year').value);
}
return (
<>
<select id="year">
浏览 15提问于2021-06-17得票数 0
回答已采纳
1回答
我想在react表单中使用Autocomplete，它应该能够选择多个值。提交表单后，当我单击编辑按钮时，我提交的值应该会显示在自动完成组件中。这应该适用于不同的用户，根据他们的名字。
我该怎么做呢？
浏览 0提问于2021-07-06得票数 0
我是一个新的反应，我有一些关于useState钩子的怀疑。我最近在一个基于应用编程接口的食谱反应应用程序.The上工作，我面临的问题是，当我在搜索表单中提交一些东西时，状态应该会发生变化，但状态没有改变，但如果我重新提交表单，状态就会改变。 import React,{useState,useEffect} from "react";
import Form from "./componnents/form";
import RecipeBlock from "./componnents/recipeblock"
imp
浏览 58提问于2020-11-28得票数 0
因此，我正在进行表单验证，表单是使用React.js创建的。现在，我希望用jQuery进行表单验证，但是当我尝试选择react.js创建的元素，特别是一个默认值的输入时，它表示该元素的值是未定义的。意味着它没有被找到。我让jQuery在呈现之后运行，所以我不知道是什么阻止了它找到id。
index.html
<section id="formDiv" class="sections">
</section>
<script src="js/jquery.js"></script>
<scri
浏览 4提问于2015-05-26得票数 2
回答已采纳
2回答
表单数据没有填写反应
、、、、
我有一个非常基本的项目，下一个js在这个项目中我有一个简单的形式。当我提交此表单时，我使用append方法将数据放在表单数据中，然后，当我将表单数据记录在控制台中时，它是一个空对象，因此我想知道为什么会发生这种情况，这是我的代码
import styles from '../styles/Home.module.css'
import {useState} from "react";
export default function Home() {
const [inputs, setInputs] = useState({
nam
浏览 6提问于2022-04-17得票数 0
回答已采纳
本质上，在提交表单时，我想接受这个值并将其传递给currencies.filter函数。上面写着document.getElementById..。
当它是
currency.currency === 'BTC‘
这是可行的
然而，这并不是
currency.currency === document.getElementById('userInput')
更好的方法是在我打字时实时过滤表单，但这对我来说似乎是相当有挑战性的。
谢谢
import React from 'react'
import { withRouteData, Link } fro
浏览 2提问于2018-08-15得票数 0
1回答
我正在学习react，我想创建一个简单的表单，一旦用户输入它，输入值就会发生变化和更新。我有这样的代码，输入值在输入时更新状态，但是当我按enter键时，旧状态返回。我做了很多谷歌，但似乎无法使它发挥作用。我尝试过在表单中使用提交按钮，但这并没有什么区别。我想让它在没有提交按钮的情况下工作，就像在值更改和更新onChange中一样。我没看到什么？
import React, { useState } from 'react';
function App() {
const [value, setValue] = useState('John');
浏览 9提问于2022-03-21得票数 0
回答已采纳
我已经在中创建了动态表单--React本机，如果用户单击该按钮，它将在按钮上方添加新表单。用户点击按钮的时间，它会添加那么多的表单。我已经做到了，但我面临的问题，在文本更改。
问题是，当我开始输入表单时，它首先显示秒的分数值，然后变为空值。
下面的是我尝试过的代码
import React, { PureComponent } from 'react'
import {
Text,
View,
TextInput
} from 'react-native'
import { TouchableOpacity } from '
浏览 2提问于2019-08-07得票数 1
我想在成功提交后重置我的表单，我尝试了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
回答已采纳
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
1回答
我目前正在学习反应，我试图做一个简单的清单。用户可以点击“添加到列表”按钮，一个模式窗口将出现在表单中，用户可以在其中输入一行文本。当表单提交时，文本输入应该出现在无序列表中.我似乎无法让文本输入出现在无序列表中。我不知道我做错了什么。这是我的代码：
import React, {useState} from 'react';
import {Modal, Button, Form} from 'react-bootstrap';
function App() {
const [newListItem, setNewListItem] = use
浏览 3提问于2019-11-22得票数 0
我有一个使用antd React库构建的多步骤表单。我根据所处的阶段有条件地呈现字段，但所有字段都在相同的Form下。
当我记录传递给onFinish处理程序的values时，values不包括表单第一步中的字段。values["name"]不存在，但是如果我检查form.getFieldValue("name")，我期望的值出现在form上。
import React, { Fragment } from 'react';
import { Form, Input, DatePicker, Button, Card, Checkbox, Inp
浏览 1提问于2020-09-12得票数 0
我在我的react应用程序中使用了formik。我已经从一个状态初始化了所有的表单值。但是如果redux store中的道具发生变化，我想要更新一个特定的表单字段。下面是我的formik表单：
<Formik
initialValues={this.state.branchData}
enableReinitialize={true}
onSubmit={this.formSubmit} >
{({ values, setFieldValue }) => (
<Form >
<Row>
<Col l
浏览 0提问于2020-02-24得票数 5
回答已采纳
我正在使用react钩子表单，并尝试设置表单的默认值，该表单通过在数组上进行映射并在表单中输出输入来输出。我已经将数组简化为一个类似于此{name0:"fijs"，name1:"3838"...}的对象，如果我手动将其作为默认值传递，它将映射到我的输入并填充它们。但是，如果我从执行reduce函数的变量输入它们，它不会填充它。我认为这是因为在第一次渲染时它是未定义的。我试过使用useEffect，但它不起作用，所以我被卡住了。 这是我正在编写的代码的一部分 这就是整件事 更新:我已经尝试了从应用程序接口重置useEffect，我认为这是解决方案，但仍然没有骰子
浏览 28提问于2021-02-28得票数 1
回答已采纳
我想要的:在Next.JS中用React.JS创建2页，可以执行以下操作：
用户在有搜索栏的第1页(/home)中着陆。
用户在页面1中键入他在搜索栏中想要的内容，并验证表单
用户被重定向到页面2(/search/:参数)，URL参数中的查询字符串.
在传递arg的情况下，向页面2发出HTTP请求
向用户显示http请求的结果。
我所做的，但我没有成功地做到
import Head from 'next/head'
import React, { Component } from 'react'
import { ApolloClie
浏览 4提问于2020-12-03得票数 0
1回答
反应钩中的切换布尔状态
、、、、
当我运行以下代码并单击按钮时，我设法触发了useEffect函数：
const { useState, useEffect } = React;
const Example = () => {
const [bool, setBool] = useState(false);
useEffect(() => {
console.log(bool);
}, [bool]);
return (
<button
type='button'
onClick={() => {
setB
浏览 4提问于2021-09-30得票数 2
回答已采纳
我在编辑表单中获取记录的“更新”值时遇到了很大的麻烦。我总是得到初始记录值，即使我有一个链接到正确记录源的输入，这应该会更新它。
有没有其他方法可以获得SimpleForm的值？
我有一个简单的编辑表单：
<Edit {...props}>
<SimpleForm>
<MyEditForm {...props} />
</SimpleForm>
</Edit>
MyEditForm如下：
class MyEditForm extends React.Component {
componentDi
浏览 11提问于2018-07-30得票数 14
回答已采纳
我创建了一个名为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
回答已采纳
我是新来的，还在练习反应。我的输入表单有问题，每当我输入任何键时，我总是得到TypeError:无法读取属性值为null
这是我的密码：
import React, { useState } from 'react';
export default function FormPractice() {
const [isDefault, setIsDefault] = useState('');
const [balance, setBalance] = useState({amount: null});
return (
<div classNam
浏览 2提问于2020-05-18得票数 2
回答已采纳
我正在构建一个通用的表单上下文来帮助管理表单的状态。在一切正常的情况下，我无法在窗体上初始设置错误对象。看起来只设置了一个状态，而不是两个。从我使用过的其他组件中，我不知道一个功能组件中只能有一个useState？
import React, { useState } from "react";
export const FormContext = React.createContext();
// sample initialErrors looks like {password: "Error"}
const ZForm = ({ children,
浏览 5提问于2021-10-29得票数 1
2回答
我正在玩一个API，并制作一个用于数据显示的react应用程序。在发送了请求的信息(通过表单)(通过axios)之后，我使用React Hooks的setState方法设置了状态，但这不是很好地工作，这创建了一个罕见的行为。我知道我应该使用use Effect，但我不知道如何使用。 下面是我设置状态的代码部分： function Home() {
const [search, setSearch] = useState('')
const [visibleMsj, setVisibleMsj] = useState(false)
const [pokemon, s
浏览 8提问于2020-04-18得票数 1
我创建ChildComponent表单，并使用submit将数据发送到ParentComponent状态。但发送后我无法清除表单字段。我怎么才能解决这个问题？还有其他方式发送数据吗？
儿童部分：
import React, { Component } from 'react';
class ChildComponent extends Component {
constructor(props) {
super(props);
this.state = {
name: ""
}
浏览 1提问于2022-09-28得票数 1
2回答
我是Reactjs的新手，我正在使用nextjs，我尝试集成“时事通讯”，我为此创建了一个组件，运行良好，但我无法在屏幕/WebsitePage中显示“成功”或“错误”消息，我在控制台中得到“成功”消息，但是“成功/错误”消息没有显示在这里是我的代码。
import React, { useEffect, useState } from "react";
const Subscribe = () => {
const [email, setEmail] = useState('');
const [error, setError] = useStat
浏览 4提问于2022-06-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
