Javascript 如何停止在React中加载下一个组件

在React中，如果当前组件的输入（文本字段）为空，我希望停止渲染下一个组件。我没有表单或输入提交标记，只有state和onChange方法

class TextFields extends React.Component {

  constructor(props){
    super(props);

    this.state = {
      studentId: null,
      studentName: null,
      employeeName: null,
      supervisorName: null,
    };
  }

  handleChange = () => event => {
    this.setState({
      [event.target.id]: event.target.value,
    });
  }

  componentWillUnmount() {
    this.props.setFormPart1Value(this.state);
  }

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off" >
        <TextField
          required
          id="studentId"
          label="Student ID"
          className={classes.textField}
          onChange={this.handleChange()}
          margin="normal"
        />
        <TextField
          required
          id="studentName"
          label="Student Name"
          className={classes.textField}
          onChange={this.handleChange()}
          margin="normal"
        />
        <TextField
          required
          id="employeeName"
          label="Employee Name"
          className={classes.textField}
          onChange={this.handleChange()}
          margin="normal"
        />
        <TextField
          required
          id="supervisorName"
          label="Supervisor Name"
          className={classes.textField}
          onChange={this.handleChange()}
          margin="normal"
        />
      </form>
    );
  }
}

类文本字段扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
studentId:null，
学生姓名：空，
employeeName:null，
supervisorName:null，
};
}
handleChange=（）=>事件=>{
这是我的国家({
[event.target.id]：event.target.value，
});
}
组件将卸载（）{
this.props.setFormPart1值（this.state）；
}
render（）{
const{classes}=this.props；
返回(
);
}
}

因此，如果有任何组件方法停止渲染或任何其他想法，而不添加表单或输入提交。

---

我是新手，所以任何能帮助我的人都应该是独立的。在这种情况下，我建议您使用表单的两个交互部分的父组件作为它们之间的协调器。这可以是您分配给其新职责的现有组件，也可以是将此作为其唯一任务的全新组件

---

无论哪种情况，父组件都可以检查文本字段的状态，然后选择是否呈现表单的其余部分。

组件应该是独立的。在这种情况下，我建议您使用表单的两个交互部分的父组件作为它们之间的协调器。这可以是您分配给其新职责的现有组件，也可以是将此作为其唯一任务的全新组件

无论哪种情况，父组件都将能够检查文本字段的状态，然后选择是否呈现表单的其余部分。

类文本字段扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
studentId:null，
学生姓名：空，
employeeName:null，
supervisorName:null，
};
}
handleChange=（）=>事件=>{
这是我的国家({
[event.target.id]：event.target.value，
});
}
组件将卸载（）{
this.props.setFormPart1值（this.state）；
}
render（）{
const{classes}=this.props；
const{studentId，studentName，employeeName}=this.state；
返回(
{studentId&}
{studentName&&}
{employeeName&&}
);
}
}

类文本字段扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
studentId:null，
学生姓名：空，
employeeName:null，
supervisorName:null，
};
}
handleChange=（）=>事件=>{
这是我的国家({
[event.target.id]：event.target.value，
});
}
组件将卸载（）{
this.props.setFormPart1值（this.state）；
}
render（）{
const{classes}=this.props；
const{studentId，studentName，employeeName}=this.state；
返回(
{studentId&}
{studentName&&}
{employeeName&&}
);
}
}

render（）{
const{classes}=this.props；
const{studentId，studentName，employeeName}=this.state；
返回(
{学生ID&&
}
{学生姓名&&
}
{雇员姓名&&
}
);
}

render（）{
const{classes}=this.props；
const{studentId，studentName，employeeName}=this.state；
返回(
{学生ID&&
}
{学生姓名&&
}
{雇员姓名&&
}
);
}

如果我理解正确，您需要检查

if(this.state.studentId && this.state.studentName && this.state.employeeName && this.state.supervisorName) {return <Component/>}

if（this.state.studentId&&this.state.studentName&&this.state.employeeName&&this.state.supervisorName）{return}

如果条件为“true”，则可以渲染组件。 或者，如果需要通过道具将TextFields组件的状态传递给子组件，则需要编写

---

如果（props.studentId&&props.studentName&&props.employeeName&&props.supervisorName）{return}

如果我理解正确，您需要检查

if(this.state.studentId && this.state.studentName && this.state.employeeName && this.state.supervisorName) {return <Component/>}

if（this.state.studentId&&this.state.studentName&&this.state.employeeName&&this.state.supervisorName）{return}

如果条件为“true”，则可以渲染组件。 或者，如果需要通过道具将TextFields组件的状态传递给子组件，则需要编写

---

if（props.studentId&&props.studentName&&props.employeeName&&props.supervisorName）{return}

谢谢您的回复。。拥有父组件可以将子组件状态发送到父组件。父组件将状态提供给子组件。它只需看一下就可以了，不需要交流。是否可以更改子组件中的给定状态并发送回？可能是这样，但您永远不应该需要或执行它。当状态更改时，父级将被重新呈现，并且能够相应地更改。感谢您的回复。。拥有父组件可以将子组件状态发送到父组件。父组件将状态提供给子组件。它只需看一下就可以了，不需要交流。是否可以更改子组件中的给定状态并发送回？可能是这样，但您永远不应该需要或执行它。当状态更改时，父级将被重新呈现，并且能够相应地更改。感谢您的回复。我有一个父组件。这是一个步进器，取自MaterialUI。有一个“下一步”按钮来更改组件。一切都很好。。。我只想验证各个组件及其文本字段。所有输入都是有效的，然后必须转到下一个组件。有没有办法让孩子冷静下来