Question

我在React中构建表单。在这个表单中，我有一个警报组件，如果提交正常或不好，则显示响应消息。

我的表单如下：

<form onSubmit={this.onSubmit}>
    {
        this.state.error &&
        <Alert text={this.state.error} />
    }
    <input
        type="text"
        placeholder="Enter link url"
        value={this.state.url}
        onChange={this.onUrlChange} />

    <button type="submit">Add link</button>
</form>

我的状态有一个错误属性，如果设置了，它将显示警报组件。在我的警报组件中，我想显示由我的表单设置的给定文本：

const Alert = ({ text, closeCallback }) => (
    <div className="alert">
        {text}
        <button onClick={(e) => closeCallback()}>X</button>
    </div>
);

在我的警报组件中，我希望能够从视图中删除组件并使其从父渲染中消失。但是如何？

我知道我可以从父级（将错误状态设置为空字符串）向下发送到我的警报组件的回调函数，如：

<Alert closeCallback={parentFunction()} text={this.state.error} />

但是每次我想在这个场景中使用我的警报组件时，我必须在我的父组件中创建那个精确的回调函数以及我的条件this.state.error && <Alert text={this.state.error} />。我可以以某种方式避免这种情况吗？

我是React btw的新手。

Answer 1

您可以将函数保留在内部并在渲染中返回null，它告诉React不渲染任何内容，如下所示：

import React, { Component } from "react";
import { render } from "react-dom";

class Alert extends Component {
  state = {
    isVisible: true
  };
  handleToggleState = () => {
    this.setState(prevState => ({
      isVisible: !prevState.isVisible
    }));
  };
  render() {
    return this.state.isVisible ? (
      <div className="alert">
        {this.props.text}
        <button onClick={this.handleToggleState}>X</button>
      </div>
    ) : null;
  }
}

class Form extends Component {
  state = { error: "Some weird error" };
  render() {
    return (
      <form onSubmit={this.onSubmit}>
        {this.state.error && <Alert text={this.state.error} />}
        <input
          type="text"
          placeholder="Enter link url"
          value={this.state.url}
          onChange={this.onUrlChange}
        />

        <button type="submit">Add link</button>
      </form>
    );
  }
}

render(<Form />, document.getElementById("root"));

Answer 2

我只是摆弄了@Karens的答案并提出了以下内容，具体取决于componentWillReceiveProps，所以我不必在表单视图中使用该条件，将其全部保留在我的Alert组件中：

function getMaxId( $modelName ){
    $criteria = new CDbCriteria;
    $criteria->order = 'id DESC';
    $model = $modelName::model()->find( $criteria );
    return $model->id;
}

条件显示警报组件，可选择从视图中删除组件

2 个答案: