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

标签： javascriptreactjs

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>
    );
  }
}

你可以做这样的事情，只有当前一个字段有值时，女巫才会呈现