如何在React中显示/隐藏div？

Abbey 发表于 Dev

修道院

我想显示<div nameClass="showName">何时单击按钮并且this.state.name的值不为null。showResult状态检查名称的值是否为null，但是我猜这不起作用。我不知道该如何解决。

import React, { Component } from 'react';
class PhoneForm extends Component{
state = {
    name : '',
    showResults : false
}
handleChange = (e) => {
    this.setState({
        name: e.target.value
    })
}
onClick=(e)=>{
    this.setState({
        showResults: this.state.name===null ? false : true
    })
}
render(){
    return (
        <form>
            <input
                placeholder="name"
                value={this.state.name}
                onChange={this.handleChange}/>
                <button onClick={this.onCkick}>클릭!</button>
                <div nameClass="showName" style={{display:(this.state.showResults? 'block':'none')}}>{this.state.name}</div>
        </form>
    );
}}


export default PhoneForm;

托勒

您的渲染方法中有一个小的错字。您的更改事件处理程序称为onClick，而不是onCkick。

您还必须确保preventDefault在提交表单时在事件上使用，否则浏览器将重新加载。

class PhoneForm extends React.Component {
  state = {
    name: "",
    showResults: false
  };

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

  onClick = e => {
    e.preventDefault();
    this.setState({
      showResults: this.state.name === null ? false : true
    });
  };
  
  render() {
    return (
      <form>
        <input
          placeholder="name"
          value={this.state.name}
          onChange={this.handleChange}
        />
        <button onClick={this.onClick}>클릭!</button>
        <div
          nameClass="showName"
          style={{ display: this.state.showResults ? "block" : "none" }}
        >
          {this.state.name}
        </div>
      </form>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

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

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