Javascript 在用户输入不可用时隐藏元素'；不存在

我的目标是隐藏一个

div

s或所有

p

标记，直到用户输入实际存在。您可以在下面看到我的尝试，其中包括将我的div state值更改为true或false的方法，以及将

显示调整为
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;

从“React”导入React；
类UserInput扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
showElements:错误
};
}
handleChange=事件=>{
this.setState（{value:event.target.value}）；
};
badRobot=（）=>{
const newInput=this.state.value；
让badInput=“BLA”
.重复（newInput.length/3+1）
.子字符串（0，newInput.length）；
返回输入；
};
隐藏元素=（）=>{
const userValueLength=this.state.value；
if（userValueLength.length！==0）{
console.log（“它工作了”）；
this.setState（{showElements:true}）；
}
};
render（）{
返回(
说什么

好机器人
我听到你说{this.state.value}，对吗

坏机器人
我听到你说{this.badRobot（）}，对吗

坎耶博特5000
我会让你说完的，但碧昂丝是{this.state.value}

);
}
}
导出默认用户输入；
检查
值
字符串是否与空字符串不同听起来是显示
div
的好条件

您可以直接在render方法中检查
值，而不是将布尔值保持在状态


类UserInput扩展了React.Component{
状态={
值：“”
};
handleChange=事件=>{
this.setState（{value:event.target.value}）；
};
render（）{
const{value}=this.state；
常量showDiv=值！==“”；
const badInput=“BLA”
.重复（value.length/3+1）
.子字符串（0，值.长度）；
返回(
说什么

好机器人
我听到你说{value}，对吗

坏机器人
我听到你说{badInput}，对吗

坎耶博特5000
我会让你说完的，但碧昂丝是{value}

);
}
}
render（，document.getElementById（“根”））
您可以执行条件呈现

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



类UserInput扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
showElements:错误
};
}
handleChange=（事件）=>{
常量值=event.target.value；
const showElements=value.length>0？真：假；
this.setState（{showElements，value}）；
}
badRobot=（）=>{
const newInput=this.state.value；
让badInput='BLA'。重复（newInput.length/3+1）。子字符串（0，newInput.length）
返回错误输入
}
隐藏元素=（）=>{
const userValueLength=this.state.value
if（userValueLength.length！==0）{
console.log（“它工作了”）；
this.setState（{showElements:true}）
}
}
render（）{
返回(
说什么

{
这个.state.showElements？
(
好机器人
我听到你说{this.state.value}，对吗

坏机器人
我听到你说{this.badRobot（）}，对吗

坎耶博特5000
我会让你说完的，但碧昂丝是{this.state.value}

)：null
}
)
}
}