Question

我知道这个问题看起来很多余，我遇到了另一个问题，我在这里找不到它。

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

如果您需要完整的代码，请在这里 https://codesandbox.io/s/qz7n1yy06j

mainpage.js

onEditClick(objectId){
        return <EditRow objectId={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));

我正在尝试在提交表单时将值传递给组件。我为此冲浪，一无所获。真正的帮助会很好。因此，在给出减分之前，请给我答案。谢谢

Answer 1

由于您使用react-route来通过点击编辑按钮来路由到编辑页面，因此您无需返回editrow组件，因为{{1 }} react-router，因此您需要将objectId作为参数传递为

Link

在路线中，您需要提及以下参数

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

然后，您可以访问<Route path="/login_success/editdetails/:objectId" component={EditRow} />组件中的参数，

editrow

Answer 2

为组件类创建一个构造函数，然后用props调用super。

还尝试将onSubmit方法绑定到该类。

class EditRow extends React.Component{

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

   renderTextField(field){

   //.... rest of your code

Answer 3

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

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

class App extends React.Component { // app is the closest common ancestor
  constructor() {
    this.state = {
      data: ""  // here we store the data both components will use
    };
  }

  onChange = (e) => { // this function is passed to one component to fetch data from it
    const data = e.currentTarget.value;
    this.setState(() => ({data}));
  }

  render() {
    const {data} = this.state;
    return (
      <div>
        <Comp1 onChange={this.onChange}/> { /* this component is providing the data */ }
        <Display value={data} />  { /* this component is using the data */ }
      </div>
    );
  }
}

const Comp1 = ({onChange}) => {
  return <input onChange={onChange} />;
}

const Display = ({value}) => {
  return <p>{value}</p>;
}

ReactDOM.render(<App/>, document.querySelector("#root"))

实时演示：https://stackblitz.com/edit/react-g65mbj

要注意的一件事是，数据以某种状态存储，这导致两个组件都重新呈现新信息。如果不重新渲染，数据将被更改，但视图仍将与更改前相同。

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

上下文
状态管理系统，例如redux或mobx

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

3 个答案: