Question

在React中，如果当前组件的输入（文本字段）为空，我想停止渲染下一个组件。我没有状态或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>
    );
  }
}

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

如果condition为“ true”，则可以渲染组件。或者，如果您需要通过道具将TextFields组件的状态传递给子组件，则需要编写
if(props.studentId && props.studentName && props.employeeName && props.supervisorName) {return <Component/>}

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

4 个答案: