Question

我想在单击按钮且<div nameClass="showName">的值不为null时显示this.state.name。 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;

Answer 1

您的渲染方法中有一个小的错字。您的更改事件处理程序称为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>

Answer 2

当输入为空时，将不显示任何内容，因此我们无需检查输入是否具有值。

在class $ { constructor(ele) { // ... } html(html) { // .. } }功能上切换可见性需要什么。

如果您不想一直刷新页面，请将<body> <input="text", id="a", class="class"> <input="text", id="x", class="class"> <input="text", id="c", class="class"> <input="text", id="w", class="class"> </body> type属性设置为'button'。

like：onClick

或在事件上触发<button/>。

<button type="button" onClick={this.onClick}>클릭!</button>

preventDefault()

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

2 个答案: