Как передать переменную из одного компонента в другой

Question

Я знаю, что вопрос выглядит излишним, у меня другая проблема, и я не могу найти его здесь.

Я хочу, чтобы функция возвращала Id, и этот Id должен быть передан другому компоненту

Если вам нужен полный код, то он здесь https://codesandbox.io/s/qz7n1yy06j

mainpage.js

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

К вашему сведению, я попробовал Консоль на главной странице, она имеет правильное значение, но когда она передается в 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

Ваше описание проблемы запутано, поэтому я пытаюсь дать вам ответ (и пример) о том, как передавать реквизит между компонентами.

Самый простой способ - поместить данные в ближайшего общего предка.

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

Answer 2

Поскольку вы используете react-route для маршрутизации для редактирования страницы при нажатии кнопки редактирования, вам не нужно возвращать компонент editrow, так как react-router Link заботится о рендеринге нового компонента, поэтому вам нужно передать objectId как params как

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

В маршруте нужно указать параметры как

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

Затем вы можете получить доступ к параметрам в editrow компоненте как

this.props.match.params.objectId 

Answer 3

Создайте конструктор для класса компонента и вызовите super с помощью props, то есть.

Также попробуйте связать метод onSubmit с классом.

class EditRow extends React.Component{

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

   renderTextField(field){

   //.... rest of your code