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

【问题标题】：How to stop loading next component in React如何停止在 React 中加载下一个组件
【发布时间】：2018-09-12 09:37:53
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs

【解决方案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>
    );
  }
}

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

【讨论】：

【解决方案2】：

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

在任何一种情况下，父组件都可以检查文本字段的状态，然后选择是否要呈现表单的其余部分。

【讨论】：

感谢回复。有父组件是否可以将子组件状态发送给父组件。
父母给状态给孩子。它可以看它，不需要交流。
是否可以在子组件中更改给予状态并返回？
可能是，但您永远不需要或不这样做。当状态改变时，父级将被重新渲染并能够相应地改变

【解决方案3】：

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

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

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

【讨论】：

感谢您的回复。我有一个父组件。它是取自 Material UI 的步进器。有一个下一步按钮可以更改组件。一切正常...我只想验证各个组件及其文本字段。所有输入都是有效的 n 然后它必须转到下一个组件。是否有任何方式将子组件传递给父组件。

【解决方案4】：

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

【讨论】：