Question

我的目标是隐藏我的div之一或我的所有p标签直到用户输入实际存在。您可以在下面看到我的尝试，其中包括将div状态的值更改为true或false以及是否为true或false，将display更改为block或none的方法。不是用户输入了什么。

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

我的愿景是测量用户输入的长度，如果该长度大于0，请显示我的div或p标签。

在代码的渲染部分中，您会看到一个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;

Answer 1

检查value字符串是否不同于空字符串似乎是显示div的良好条件。

您可以直接在render方法中检查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>

Answer 2

您可以进行有条件的出租。

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

        handleChange = (event) => {
                const value = event.target.value;
            const showElements = value.length > 0 ? true: false;
            this.setState({showElements, 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>
            {
                this.state.showElements ? 
              (
                <div>
                <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>

              ): null
            }
            </div>
        )
    }
}

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

2 个答案: