Reactjs 如何将变量从一个组件传递到另一个组件

我知道这个问题看起来有些多余，我有一个不同的问题，在这里找不到。

我想要一个函数返回一个Id，该Id必须传递给另一个组件

如果您想要完整的代码，请点击此处

mainpage.js

onEditClick(objectId){
        return <EditRow objectId={objectId}/>
    }

onEditClick（objectId）{
返回
}

仅供参考，我在主页中尝试了Console，它具有正确的值，但当它被传递到editrow时，它将变得未定义

editrow.js

   class EditRow extends React.Component{

    renderTextField(field){
        return(
            <div className="form-group">
                <label>{field.label}</label>
                <input
                    className="form-control"
                    type="text"
                    placeholder={field.placeholder}
                    {...field.input}
                    required
                />
            </div>
        )
    }

    onSubmit(values){
        this.props.editRow(values, () => {
            this.props.history.push('/login_success');
        },this.props.objectId);
    }

    render(){
        const {handleSubmit}=this.props;

        return(
            <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                <Field
                    label={"Student Name"}
                    placeholder={"Enter the Name"}
                    name="name"
                    component={this.renderTextField}
                />
                <Field
                    label={"Average Grade"}
                    placeholder={"Enter the Average grade"}
                    name="avgGrade"
                    component={this.renderTextField}
                />
                <Field
                    label={"Curriculum / Occupation"}
                    placeholder={"Enter the Curriculum or Occupation"}
                    name="occupation"
                    component={this.renderTextField}
                />
                <button className="btn btn-primary btn-right">Edit</button>
            </form>
        );
    }
}

export default reduxForm({form:'EditRow'})(connect (null,{editRow})(EditRow));

class EditRow扩展了React.Component{
renderTextField（字段）{
返回(
{field.label}
)
}
onSubmit（值）{
this.props.editRow（值，（）=>{
this.props.history.push（'/login_success'）；
}，this.props.objectId）；
}
render（）{
const{handleSubmit}=this.props；
返回(
编辑
);
}
}
导出默认的reduxForm（{form:'EditRow'}）（connect（null，{EditRow}）（EditRow））；

我试图在表单提交时将值传递给组件。我在网上冲浪，却一无所获。真正的帮助会很好。

---

所以请在给减分之前，给我答案。谢谢您

为组件类创建一个构造函数，并使用props调用super，即

还要尝试将onSubmit方法绑定到类

class EditRow extends React.Component{

   constructor(props) {
      super(props)
      this.onSubmit = this.onSubmit.bind(this)
   }

   renderTextField(field){

   //.... rest of your code

---

您的问题描述非常复杂，因此我尝试为您提供有关如何在组件之间传递道具的答案（以及一个示例）

最直接的方法是将数据放在最接近的共同祖先中

类应用程序扩展了React。组件{//App是最接近的公共祖先
构造函数（）{
此.state={
data://这里我们存储两个组件将使用的数据
};
}
onChange=（e）=>{//将此函数传递给一个组件以从中获取数据
常数数据=e.currentTarget.value；
this.setState（（）=>（{data}））；
}
render（）{
const{data}=this.state；
返回(
{/*此组件正在提供数据*/}
{/*此组件正在使用数据*/}
);
}
}
常量Comp1=（{onChange}）=>{
返回；
}
常量显示=（{value}）=>{
返回{value}
；
}
ReactDOM.render(

需要注意的一点是，数据存储的状态会导致两个组件都使用新信息重新渲染。如果它没有重新渲染，数据将被更改，但视图仍将与更改前相同

在组件之间共享数据的其他方式包括：


上下文
状态管理系统，如redux或mobx
由于您正在使用
react route
进行路由，点击编辑按钮编辑页面，您不需要返回
editrow
组件，因为新组件的呈现由
react router
链接
负责，因此您需要将objectId作为参数传递，如下所示：

 <Link to={"/login_success/editdetails/" + this.props.row.objectId}>
        <button className="edit">
              Edit
        </button>    
 </Link>

 <Route path="/login_success/editdetails/:objectId" component={EditRow} />

从
onEditClick
返回的react元素你在做什么？
editRow
函数在做什么？它是从传递到
editRow
的道具中获取的，但我没有看到在你的第一个代码段中传递的道具。你在这里展示的代码中有更多的内容。很难在不知情的情况下判断发生了什么是的，我在mainpage.js中做了@thilinasampathry log
objectId
this.props.match.params.objectId