javascript - 如何停止加载 React 中的下一个组件

Question

在 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 新手，所以任何人都可以帮助我..

Answer 1

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;
    const { studentId, studentName, employeeName} = this.state;

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

你可以做类似的事情，仅当前一个字段具有值时，女巫才会渲染