在用户输入不存在时隐藏元素

debugcn 发表于 Dev

爱德华

我的目标是隐藏我div的一个或我的所有p标签，直到用户输入实际存在。您可以在下面看到我的尝试，其中包括将 div 状态的值更改为 true 或 false 以及它是 true 还是 false 的方法，调整displaytoblock或none用户是否输入了任何内容。

我知道将其应用于某种按钮很简单，但我的目标是允许 React在用户输入内容后重新渲染div或p元素。

我的愿景是测量用户输入的长度，如果它大于 0，则显示 mydiv或ptags。

在我的代码的渲染部分中，您会看到里面div有三个p标签。我希望这些p标签，甚至整个 div（如果更容易）在用户开始在输入框中输入内容之前不显示。

import React from "react";

class UserInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      showElements: false
    };
  }

  handleChange = event => {
    this.setState({ value: event.target.value });
  };

  badRobot = () => {
    const newInput = this.state.value;
    let badInput = "BLA"
      .repeat(newInput.length / 3 + 1)
      .substring(0, newInput.length);
    return badInput;
  };

  hideElements = () => {
    const userValueLength = this.state.value;
    if (userValueLength.length !== 0) {
      console.log("it worked");
      this.setState({ showElements: true });
    }
  };

  render() {
    return (
      <div>
        <form>
          <label>
            <p>Say Anything</p>
            <input
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
            />
          </label>
        </form>
        <div style={{ display: this.state.showElements ? "block" : "none" }}>
          <h3>Good Robot</h3>
          <p>I hear you saying {this.state.value}. Is that correct?</p>
          <h3>Bad Robot</h3>
          <p>I hear you saying {this.badRobot()}. Is that correct?</p>
          <h3>Kanyebot 5000</h3>
          <p>I'm gonna let you finish but Beyonce is {this.state.value}.</p>
        </div>
      </div>
    );
  }
}

export default UserInput;

托尔

检查value字符串是否与空字符串不同听起来是显示div.

您可以value直接在渲染方法中检查状态，而不是保持布尔值。

class UserInput extends React.Component {
  state = {
    value: ""
  };

  handleChange = event => {
    this.setState({ value: event.target.value });
  };

  render() {
    const { value } = this.state;
    const showDiv = value !== "";
    const badInput = "BLA"
      .repeat(value.length / 3 + 1)
      .substring(0, value.length);

    return (
      <div>
        <form>
          <label>
            <p>Say Anything</p>
            <input
              type="text"
              value={value}
              onChange={this.handleChange}
            />
          </label>
        </form>
        <div style={{ display: showDiv ? "block" : "none" }}>
          <h3>Good Robot</h3>
          <p>I hear you saying {value}. Is that correct?</p>
          <h3>Bad Robot</h3>
          <p>I hear you saying {badInput}. Is that correct?</p>
          <h3>Kanyebot 5000</h3>
          <p>I'm gonna let you finish but Beyonce is {value}.</p>
        </div>
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。