ReactJS Передача данных из дочернего компонента в родительский, обратно в другой дочерний - PullRequest
Новая
       22

ReactJS Передача данных из дочернего компонента в родительский, обратно в другой дочерний

0 голосов
/ 15 января 2020

Я новичок, чтобы отреагировать, поэтому, пожалуйста, потерпите меня.

Что я хочу сделать:

По сути, передача данных из дочернего компонента в родительский компонент обратно в другой дочерний компонент. 

<ParentComponent>
  <ChildComponent1>
  <ChildComponent2>
</ParentComponent>

Дочерний компонент1 имеет форму. Когда форма отправлена ​​... 1.) состояние должно быть обновлено с содержанием формы. 2.) данные о состоянии должны передаваться на родительский компонент. 3.) Родительский компонент должен передавать данные на ChildComponent2 4.) ChildComponent2 теперь имеет доступ к данным из ChildComponent1 и может манипулировать этими данными.

# 4 - моя цель, но я застрял на # 2. Я думаю, что я все делаю логически, но я не уверен. Когда я проверяю свое родительское состояние после отправки формы, оно по-прежнему выглядит так, как будто оно находится в своем начальном состоянии ('').

Вот мой код. 

import styles from './Body.module.css';
import {LeftPortion} from './LeftPortion/LeftPortion.js';
import RightPortion from './RightPortion/RightPortion.js';



class Body extends Component {

  constructor(props){
    super(props)
    this.state={
      teamOne: '',
      teamTwo: ''
    };
    this.updateBetInfo = this.updateBetInfo.bind(this);
  }

  updateBetInfo(firstTeam, secondTeam){
    this.setState({teamOne: firstTeam, teamTwo: secondTeam})
  }

  render(){
    return(
      <div className={styles.container}>
          <LeftPortion updateParent={this.updateBetInfo}/>
          <RightPortion/>
      </div>
    );
  }
}

export default Body;

import styles from './LeftPortion.module.css';


export class LeftPortion extends Component{

  constructor(props){
    super(props)
    this.state={
      teamOne:'',
      teamTwo:''
    }
      this.onChange= this.onChange.bind(this);
      this.onSubmitForm= this.onSubmitForm.bind(this);
  }


  onChange(event){
    this.setState({[event.target.name]: event.target.value})
  }

  onSubmitForm(teamOne, teamTwo){
    var teamOne = this.state.teamOne;
    var teamTwo = this.state.teamTwo;
    this.props.updateParent(teamOne,teamTwo)
  }

  render(){

    return(
      <div className={styles.container}>
          <h4>Enter bet info here:</h4>
          <h4>-------------------</h4>
          <h4>Straight bet</h4>
          <div className={styles.teamEntry}>
            <form>
              <label>
                Team 1:
                <input type="text" name="teamOne"onChange={this.onChange}/>
              </label>
              <br/>
              <label>
                Team 2:
                <input type="text" name="teamTwo" onChange={this.onChange}/>
              </label>
              <br/>
              <input type="submit" value="Submit" onClick={this.onSubmitForm}/>
            </form>
            <br/>
            <div className={styles.betType}>
              <form>
                <label>
                  Bet:
                  <select>
                    <option value='1'>1</option>
                    <option value='2'>2</option>
                    <option value='X'>X</option>
                  </select>
                </label>
                <input type="submit" value="Submit"/>
              </form>
            </div>
          </div>
      </div>
  );
  }
}

В основном Я застрял в том, что мне нужно состояние для обновления до teamOne и teamTwo, введенных в форму из дочернего компонента, когда форма отправлена.

1 Ответ

1 голос
/ 15 января 2020

Похоже, вы не назначаете какие-либо реквизиты для второго компонента, который вы хотите обновить состояние? Выполняется ли обновление состояния вашего родительского компонента? Если это так, присвойте значение состояния дочернему компоненту 2, и оно должно работать нормально. Прямо сейчас React не будет ничего перерисовывать, так как в этом обновлении нет дочерних элементов с пропами или состоянием, на которые повлияло обновление. 

<RightPortion/>

Этот компонент должен иметь значение состояния, отражающее обновление в родительском объекте. 

<RightPortion teamOne={this.state.teamOne} />
...