ReactJS 将数据从子组件传递到父组件，再返回到不同的子组件

Question

我是新手，所以请多多包涵。

我想做的事情：

本质上是将数据从子组件传递到父组件，再返回到另一个子组件。

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

子 Component1 有一个表单。提交表单时...
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。

Answer 1

您似乎没有为您希望状态更新的第二个组件分配任何道具？您的 parent 组件的状态更新是否正在执行？如果是这样，请将状态值分配给 child 组件 2，它应该可以正常工作。现在，React 不会 re-render 任何东西，因为没有 children 的道具或状态受到更新的影响。

<RightPortion/>

该组件应该有一个状态值来反映 parent 中的更新。

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

ReactJS 将数据从子组件传递到父组件，再返回到不同的子组件

ReactJS Passing data from child component, to parent, back to different child

data-management

reactjs

react-props

react-state-management

#4 是我的目标，但我似乎坚持#2。我认为我在逻辑上做的一切都是正确的，但我不确定。当我在提交表单后检查我的父状态时，状态看起来仍然像它的初始状态 ('')。