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

您似乎没有为要更新状态的第二个组件分配任何道具？是否正在执行父组件的状态更新？如果是这样，请为子组件2分配一个状态值，它应该可以正常工作。目前，React不会重新渲染任何东西，因为没有小孩受道具或状态的影响。

<RightPortion/>

此组件应具有状态值，以反映父项中的更新。

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

ReactJS将数据从子组件传递到父组件，再传递回另一个子组件

＃4是我的目标，但我似乎坚持使用＃2。我认为我在逻辑上做对了所有事情，但不确定。提交表单后检查父状态时，该状态仍然看起来像是其初始状态（''）。

1 个答案: