React JS:如何将值传递给其他组件onSubmit
React JS是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，允许开发者将界面拆分成独立的、可复用的组件，并通过组件之间的数据传递来实现交互和状态管理。
要将值传递给其他组件的话，可以通过以下几种方式实现：
- Props传递：在React中，可以通过props将值从一个组件传递给其子组件。在父组件中定义一个属性，并将其作为参数传递给子组件。子组件可以通过props对象访问到这个值。例如：
// 父组件
class ParentComponent extends React.Component {
render() {
const value = 'Hello, World!';
return <ChildComponent value={value} />;
}
}
// 子组件
class ChildComponent extends React.Component {
render() {
const { value } = this.props;
return <div>{value}</div>;
}
}在上述例子中，父组件通过props将值Hello, World!传递给了子组件，并在子组件中通过this.props.value获取到该值。
- Context上下文：Context提供了一种在组件之间共享数据的方式，可以避免通过props一层层传递数据。可以在父组件中创建一个Context，并在需要共享数据的子组件中订阅该Context。例如：
// 创建一个Context
const MyContext = React.createContext();
// 父组件
class ParentComponent extends React.Component {
render() {
const value = 'Hello, World!';
return (
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
);
}
}
// 子组件
class ChildComponent extends React.Component {
render() {
return (
<MyContext.Consumer>
{value => <div>{value}</div>}
</MyContext.Consumer>
);
}
}在上述例子中，父组件通过MyContext.Provider将值Hello, World!提供给了子组件，子组件通过MyContext.Consumer获取到该值。
- 状态提升：如果需要将值传递给兄弟组件或更高层级的组件，可以将该值提升到它们的共同父组件中，并通过props传递给它们。这样兄弟组件或更高层级的组件就可以共享这个值了。
以上是将值传递给其他组件的几种常见方式。根据具体的场景和需求，选择合适的方式来实现数据传递。
关于React JS的更多信息和学习资源，可以参考腾讯云的React JS产品介绍页面：React JS产品介绍。
相关·内容
我正在构建一个下一个js应用程序。不幸的是，我必须创建两个组件，因为设计是关键。在这里，在一个组件中，我必须添加表单和另一个组件，我必须添加提交按钮。一切都很好，但是我如何从另一个我放置了提交按钮的组件调用onSubmit事件。请帮帮我。 第一个组件(表单组件) import { Box, InputBase } from "@mui/material";
import { useForm } from "react-hook-form";
const OrderPlaced = () => {
const {
register
浏览 29提问于2021-11-15得票数 0
回答已采纳
我使用的是react-hook-form库的一个基本示例，即使在查看了纪录片之后，我也不知道如何将数据从表单传递到另一个组件。下面是我的表单组件： import { useForm, SubmitHandler } from "react-hook-form";
type FormInputs = {
minimalFrequency: number;
maximialFrequency: number;
};
// const onSubmit: SubmitHandler<FormInputs> = data => console
浏览 17提问于2021-06-25得票数 0
回答已采纳
4回答
Parent.js
import React, { useState } from 'react'
import Child from './Child'
const Parent = () => {
const[data,setData] = useState('')
const[name,setName] = useState('')
const[toggled,setToggled] = useState(false)
const[age,setAge] = useState('
浏览 9提问于2022-06-25得票数 3
回答已采纳
我在沙箱和下面有一个简单的代码
1：将输入表单值传递给父级，但是有些地方出错了，而且值没有被传递。
这是app.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Form from './form'
class App extends Component {
constructor()
浏览 1提问于2019-12-08得票数 0
回答已采纳
onSubmit是AddExpense组件如何从ExpenseForm获取数据？
数据不能从孩子发送给家长，不是吗？
我对在组件之间发送数据感到非常困惑？
AddExpensePage.js
import React from 'react'
import { connect } from 'react-redux'
import ExpenseForm from './ExpenseForm'
import { addExpense} from '../actions/expenses'
const AddExpensePag
浏览 1提问于2019-11-21得票数 1
回答已采纳
我已经创建了一个简单的待办事项列表，添加项目是有效的，但是当我点击“删除”按钮时，我的项目并没有从列表中删除任何项目。我想知道我在我的代码中犯了什么错误，感谢所有我能得到的帮助。提前感谢！当然，我也尝试过在谷歌和Youtube上查找，但就是找不到我想要的答案。 链接：https://codesandbox.io/embed/simple-todolist-react-2019oct-edbjf App.js:
import React from "react";
import ReactDOM from "react-dom";
import "./
浏览 23提问于2019-10-09得票数 2
这是非常简单的todo列表应用程序，这是我的实践代码，正如您所看到的，我们有一个列表组件来显示项；当用户通过提交函数输入新数据时，将添加新项。
这一次，我试图删除项目，当span在李被点击，我认为我做错了。
我们如何将该事件附加到列表中？
这是我的App.js：
import React, {Component} from 'react';
import './App.css';
import List from "./components/List"
class App extends Component {
constructor(
浏览 0提问于2018-08-19得票数 0
回答已采纳
我使用了一个formik格式，并有如下的前参
Form.js
import React from "react";
import FormikWithRef from "./FormikWithRef";
const Form = ({
formRef,
children,
initialValues,
validationSchema,
onSubmit
}) => {
return (
<FormikWithRef
validateOnChange={true}
validateOnBlu
浏览 6提问于2020-08-06得票数 5
回答已采纳
任何帮助或暗示都将不胜感激。在SearchBar.js中，"this.props“在哪里定义？我没有看到在SearchBar.js类中定义了这个变量？
是因为React.Component类吗？在google中调试时，我如何进入这个React.Component类？
SearchBar.js：
import React from 'react';
class SearchBar extends React.Component {
state = { term: ''
浏览 0提问于2021-01-01得票数 1
回答已采纳
3回答
我遇到了react组件之间的通信问题。我想在组件"ProductNameSave.js“到"readJson.js”之间传递值。来自"ProductNameSave.js“的值来自组件"windowForm.js”。因为这个结构("windowForm.js“-> "ProductNameSave.js”-> "readJson.js")，我认为"ProductNameSave.js“是”thruth的来源“。以下是组件。"windowForm.js“
import React from 're
浏览 10提问于2018-08-16得票数 0
嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。
这是Button的代码，
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES =['btn--primary', 'btn--outline'];
const SIZE
浏览 2提问于2021-03-11得票数 0
我有一个关于useState钩子的问题。我们都知道，useState setter方法没有立即反映更改。例如,
const App = () => {
const [name, setName] = React.useState("");
return (
<React.Fragment>
<form onSubmit={(e) => {
e.preventDefault();
setName("submit");
console.log
浏览 4提问于2022-08-20得票数 1
对不起，如果我的问题没有解释properlY，我在反应，我需要你们的帮助，谢谢。为了详细解释它，我的编辑状态得到了完美的更新，但问题是当我试图删除它时，它是删除了最后的附加值。我知道我必须在单击“删除”按钮时更新状态，但我不知道如何更新。少帮忙会有帮助的。这是整个密码。请告诉我哪里出了问题，并给出了解决办法。app.js
import React, { Component } from 'react';
import Input from './input_bar';
import TaskList from './tasklist';
exp
浏览 1提问于2018-09-01得票数 2
回答已采纳
1回答
我无法从自定义钩子中获得更新的状态。这个例子很简单。这是一个自定义钩子，允许在自定义钩子内从暗主题切换到光主题，我使用useMemo返回一个回传值，但这似乎并不是每次用switchOn更新状态时都更新。
我不想在这个例子中使用上下文。
import { useState, useMemo, useCallback } from "react";
const useTheme = (initial) => {
const [isOn, turnOn] = useState(false);
const switchOn = useCallback((e) =>
浏览 1提问于2021-05-16得票数 1
这个Redux表单中的MapStateToProps的目标是检查用户是否在数据库中，并将一个validuser状态传回给提交的表单，这样我就可以呈现错误消息，或者将用户重定向到主页。问题是，当我试图将MapStateToProps连接到表单时，它会抛出一个错误。
Redux表格：
import React, { Component } from "react";
import { connect } from 'react-redux';
import { reduxForm, Field, Form, reset } from "redux-form&
浏览 5提问于2017-04-02得票数 1
回答已采纳
1回答
我正在尝试创建一个React组件，它将返回一个使用withFormik的Formik表单。这个组件将作为一个道具传递给另一个组件，该组件返回表单的内容。这个是可能的吗？我不知道如何将自定义道具传递给mapPropsToValues (基本上是如何将自定义的东西放在：
one:'',
two:'',
three:''
在以下代码中：
const DynamicCustomForm = ({FormType, formName, formFields, ...props}) => {
console.log(pro
浏览 15提问于2020-02-21得票数 0
回答已采纳
我正在使用带yup验证的Formik，它工作得很好。我想要做的是集成cleavejs来格式化，比如数字格式。问题是，当我的formik字段更改为Cleave时，格式是有效的，但是它不会验证表单。但是，当我更改为input to Field时，验证工作正常，但格式设置不起作用。如何将Cleave js格式传递到我的Formik字段中，而不将Field更改为Cleave她的代码。 我尝试遵循cleave js文档和它的工作，但它在我的验证中不起作用。根据cleave js文档，将输入更改为Cleave，但我使用Field来处理我的formik yup验证。 import React, { use
浏览 14提问于2019-06-12得票数 2
回答已采纳
我想对某些用户操作执行导航，比如按钮的onSubmit。假设一个用户点击了Add contact按钮，我想要react路由器重定向到"/“，这是主页。目前，我正面临这个问题--> TypeError:无法读取未定义的属性(读取“push”)。作为初学者，我非常感谢专家的帮助。
AddContacts.js
import React, { Component } from "react";
import { Consumer } from "../../context";
import TextInputGroup from "../layo
浏览 5提问于2021-11-09得票数 6
回答已采纳
我不明白为什么react窗口会在每个(所有) useState events上重新呈现列表，这些值甚至没有连接到列表本身。请有人解释一下，这是如何内部联系，我如何可以避免那些重新渲染？
import React, { useState } from "react";
import { FixedSizeList, areEqual } from "react-window";
function App() {
const [count, setCount] = useState(0);
const handleOnClick = ()
浏览 1提问于2021-10-07得票数 1
回答已采纳
我有下面的Form.js组件，它从输入表单中获取数据并进行API调用。响应存储在我的walletAssets状态变量中。现在，如果我想创建一个单独的组件，比如Display.js来显示存储在walletAssets中的响应，我如何将walletAssets的值传递给另一个组件，以便在那里使用它？
export default function Form() {
const [walletAddress, setWalletAddress] = React.useState("");
const [walletAssets, setWalletAssets] = Reac
浏览 2提问于2022-08-31得票数 0
我正在使用redux forms构建一个表单，我正在使用redux-bootstrap for ui框架。但是我不能让redux表单与react-bootstrap select组件一起工作。将显示选择字段，但不会呈现选项，并且这些选项不可见。任何帮助都将不胜感激。
这就是我到目前为止所知道的：
form.js：
render() {
<Form horizontal onSubmit={handleSubmit}>
<Field component={SelectField} label='Gender' name='gender'>
浏览 0提问于2017-11-06得票数 1
我正在做一个特别的工作，以帮助我的反应应用程序中的表单(用于实践)。
// components/Wrapper.js
import React from 'react';
export default WrappedComponent => class extends React.Component {
constructor() {
super();
this.onSubmit = this.onSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
onC
浏览 3提问于2017-09-10得票数 3
我有一个有“标题”和“内容”的表格。内容在ReactQuill组件中，它使您能够拥有丰富的文本。在添加该组件之前，我的“onChange”对两个“输入”都很好。既然组件是不同的，它就不再工作了。
我得到的错误如下：
这是AddArticle.js中的代码，表单位于：
import React, { Component } from "react";
import firebase from "../Firebase";
import ReactQuill from "react-quill";
import "react-qui
浏览 4提问于2020-09-17得票数 1
回答已采纳
App.js：
import React, { useState } from "react";
import Login from "./Login";
function App() {
const [id, setId] = useState();
return (
<>
{id}
<Login onSubmit={setId()}/>
</>
);
}
export default App;
和
Login.js：
import React, { useRef
浏览 12提问于2021-05-24得票数 0
回答已采纳
我是新来的ReactJ，编码，这是我第一次在这里张贴！所以，我正试图在ReactJ中构建一个Todo应用程序。我有四个组成部分。
第一家公司。App.js是父的吗？
import React, { Component } from 'react';
import TaskTodo from './TaskTodo';
import './App.css';
import TaskDisplayed from "./TaskDisplayed";
class App extends Component {
render() {
浏览 1提问于2017-11-07得票数 1
回答已采纳
我有一个父组件，我想从它向我的子组件发送函数。
ParentComponent.js
export default class LandingPage extends React.Component {
onSearchSubmit(term) {
console.log(term);
}
render() {
return (
<div>
<div className = "admin" >
<SearchBar onS
浏览 1提问于2019-02-27得票数 1
回答已采纳
1回答
我的React/Redux授权设置遇到了严重的挑战，我不知所措。当前错误为：
HomeHeader.js?8595:26未捕获ReferenceError:未定义调度
这里有很多错误，任何帮助都将不胜感激。
我正在创建两个授权组件，一个用于注册，另一个用于登录。AuthorizationLogin组件是我首先要做的。
我不知道如何让它传递它从表单字段中抓取的事件信息，放入变量凭证，然后向上传递到HomeHeader组件，然后再向上传递到HomePage容器。我要把所有的授权组件放到一个庞大的HomeHeader组件中吗？
下面是主要代码和流程。由于某些原因，代码不能正确加载到StackOver
浏览 7提问于2016-08-25得票数 0
回答已采纳
填充select/dropdown from state的最佳实践是什么？
我填充了一个这样的redux-form。
import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import FormItem from '../FormItem.js';
import FormFooter from '../../components/FormFoot
浏览 4提问于2018-01-20得票数 2
本人是图书馆管理系统的初学者和实施者。所以我有一个名为BookDetails.js，BookList.js的组件。BookDetails包含输入标题和描述的表单。因此，如何将输入的数据从BookDetails传递给BookList，从App传递给应用程序。
import React, { useState } from 'react'
import BookList from './BookList'
const BookDetails = (props) => {
const [bookdetails, setbookDetails] = useStat
浏览 8提问于2022-05-04得票数 0
3回答
如何在反应中从子组件中获得值？
、、、、
我创建了一个InputComponent，我想在其他组件中导入这个组件并提交，但是我做不到。如何从FormComponent中的子组件中获得值
InputComponent.js
import React, {Component} from 'react';
class InputComponent extends Component {
constructor(props) {
super(props);
this.state = { currentVal: null }
}
render() {
浏览 0提问于2018-12-12得票数 2
回答已采纳
在使用react-hook-form时，我需要向onSubmit函数传递任意数据。示例代码： function App() {
const { register, handleSubmit } = useForm();
const navigation = { foo: 'bar' }; // object to pass
const onSubmit = (data) => {
// how to access navigation here?
console.log(data);
console.log(navigation);
浏览 23提问于2021-04-08得票数 3
回答已采纳
如何在react中获得数据报警器的值？我正在使用自定义组件。
我使用的是两个组件，第一个叫做InputDateCustom.js，下面的代码如下：
import DatePicker from 'react-toolbox/lib/date_picker/DatePicker';
import React, { Component } from 'react';
const datetime = new Date(2015, 10, 16);
datetime.setHours(17);
datetime.setMinutes(28);
export
浏览 7提问于2017-06-05得票数 7
回答已采纳
我正在构建一个React组件，它是一个简单的。它有一个上传文件的Upload按钮。在我当前的代码中，我无法让onSumbit启动：
import React from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/es/Typography/Typography';
import Button from '@material-ui/core/es/Button/Button';
import { Uplo
浏览 2提问于2019-01-06得票数 0
我在做Reactjs天气项目。在提交后，我将在子组件(Form.js)的方法中获取值，并且需要在父组件(App.js)中获得该值。如何得到这个价值？
App.js文件(父组件)
getWeather = async (e) => {
e.preventDefault();
}
Form.js文件(子组件)
import React, { Component } from 'react'
import Background from '../video/rain_drop2.jpg';
import { ToastContainer, toast
浏览 0提问于2019-10-28得票数 1
回答已采纳
我正在使用一个React.js前端，当我尝试登录或注册时，当我单击login或Sign up按钮时，会得到以下错误。
Uncaught TypeError: _this.props.onSubmit is not a function
堆栈跟踪指向以下文件，
/src/containers/Login/index.js
// @flow
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from '
浏览 2提问于2017-05-09得票数 3
回答已采纳
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
回答已采纳
2回答
我正在创建一个登录组件，它将显示登录错误。但我不知道如何将errors数组从_onSubmit函数带到LoginForm
这是我的代码，密码。
import React, { Component } from 'react';
import Split from 'grommet/components/Split';
import Section from 'grommet/components/Section';
import Sidebar from 'grommet/components/Sidebar';
import L
浏览 4提问于2016-09-07得票数 0
回答已采纳
2回答
我正在尝试在我的Ionic React应用程序中使用react-hook-form。我用这个简单的表格：
const Form: React.FC<{ color: string }> = ({ color }) => {
const { handleSubmit, register } = useForm();
const onSubmit = (data: any) => {
console.log(`%c${JSON.stringify(data)}`, `color: ${color}`);
};
return (
<f
浏览 8提问于2020-03-15得票数 1
回答已采纳
我找了也不一定找到。我希望获得textarea的值，并在提交时显示<AddNote />组件段落中的值。
我的项目是创建一种记录笔记的应用程序。您必须在字段中输入备注，然后通过验证表单，您的便笺将添加到下面。
感谢你，祝你一天愉快
进入note.js
import React from 'react';
import AddNote from './addnote';
class Note extends React.Component {
constructor(props) {
super(props);
浏览 1提问于2022-06-21得票数 0
回答已采纳
我目前在一个div中呈现用户输入，与我的表单在同一个组件中。我希望将用户输入呈现在另一个页面上(在我的另一个组件中)。如何在应用程序的不同组件中呈现用户输入？
app的结构: App.js ( react路由器的导航设置)3个组件: Home.js、ProjectIdeas.js和Projects.js Planning.js (包含我的表单并当前呈现用户输入的组件)是Projects.js的子项。Projects.js是我想呈现用户输入的地方。
Planning.js
constructor() {
super()
this.state = {
ti
浏览 16提问于2020-02-06得票数 1
因此，我正在为联系人表单制作一个ReactJS组件。现在，我想要创建一个方法，从JSX中的输入中获取值，然后在另一个文件中获取该方法从组件外部返回的值。这个是可能的吗？
我的组件文件：
//Inporting React.
import React from 'react';
//Creating the contactForm Component
class ContactForm extends React.Component{
render(){
return (
<form onSubmit={this.props
浏览 2提问于2022-05-13得票数 0
回答已采纳
我无法将defaultValue设置为文本区域，我正在使用，并将TextareaField封装在react final的Field元素中。
这是我的代码：
class App extends React.Component {
submitForm(values) {
.....
}
renderForm({ handleSubmit }) {
return (
<form
onSubmit={handleSubmit}
>
<Field
name="description"
>
浏览 0提问于2018-09-11得票数 1
回答已采纳
我是个反应新手。为什么我的数据不能传递到另一个组件？我的想法是在用户选择选项标签，然后它将加载一些音频文件的基础上的选择。但这不管用。我错过了什么？
还是有更好的办法呢？
这是我的下拉组件
import React from 'react';
import Playlist from './Playlist/Playlist.js';
class Dropdown extends React.Component {
constructor (props) {
super(props);
this.state = {value: "1
浏览 1提问于2018-03-13得票数 0
在我们的项目中，我们目前有以下tslint规则：jsx-no-lambda
当我需要从onSubmit捕获event时，
我的代码看起来像这样：
public handleLogin = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
}
public render() {
return(
<form onSubmit={(event) => this.handleLogin(event)}>
...
}
这
浏览 0提问于2019-01-11得票数 0
1回答
我有一个ItemForm组件在一个反应-本地博览应用，我想使用两个创建和更新。它是一个功能组件，我正试图从父组件中传递一个处理程序，以创建一个新项或更新一个现有项。我很难理解如何将onPress处理程序从父类组件向下传递到功能性子窗体组件。
父组件：
import React, { Component } from "react";
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
// You can i
浏览 3提问于2020-05-20得票数 0
回答已采纳
2回答
单选按钮反应矩阵
、、
我试着解决这个js反应问题，然后被问题2-4困住了。问题2:我不知道如何检查每一行的本地状态，以检查重复的等级选择问题3:是否需要传递给组件的道具来检查是否唯一？问题4:我如何检查所有行都有一个选择排序和唯一的行？
以下是问题：
将“完成”类添加到行中将突出显示为绿色。对具有选定等级的行提供此视觉反馈。
将“错误”类添加到行将突出显示为红色。对已选择重复等级的行提供此视觉反馈。
在submit按钮附近有一个显示错误消息的地方。当用户在多行上选择相同的等级时，请显示此错误消息：Ranks must be unique。
默认情况下，“提交”按钮被禁用。当所
浏览 2提问于2020-10-23得票数 2
我很难处理一个包含useState的列表。我必须连续两次向列表中添加一项，并且只添加第二项。守则：
App.js
import React, { useState } from "react";
import ItemForm from "./itemForm";
function App() {
const [itemList, setItemList] = useState([]);
function addItem(item) {
setItemList([...itemList, item]);
}
return (
浏览 3提问于2021-09-27得票数 2
回答已采纳
Request.js
export default class Request extends React.Component {
getForm(e) {
let v = validator(document.getElementById('myinput')); // here is should call function from another class
}
render(){
return(
<form onSubmit={this.getForm.bind(this)}>
<RequestValidator/
浏览 0提问于2019-08-21得票数 0
回答已采纳
1回答
主要问题
我习惯于在ES6类中使用React。我还习惯于将部分代码模块化为不同的功能。我正在查看下面的示例，并试图找出如何将onSubmit的值作为一个单独的函数。
import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
let AddTodo = ({ dispatch }) => {
let input
return (
<div>
<form
浏览 2提问于2017-11-24得票数 0
1回答
我有一个简单的React/Spring应用程序，我希望将一个搜索字符串传递到一个详细信息页，然后使用相同的searchString作为参数链接回父页面。
此时，父页面应该获取值并将其存储回状态。
就现有代码而言，当父代码打开时，它会在状态中设置一组值，包括搜索字符串：
constructor(props) {
super(props);
const {cookies} = props;
this.state = {
word: '',
newWord: '',
searchString: '&#
浏览 1提问于2020-09-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
