一个显示警报的简单 ReactJS 示例

Question

我是 reactjs 的新手。我正在使用两个文本框，一个允许用户输入数字并显示其正方形，另一个允许用户输入用户名，当单击提交按钮时，一个警告框应该会显示你好用户名。我能够生成正方形，但警报无法正常工作。

这是 HTML & CSS:

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

  this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    event.preventDefault();
    alert('Hello: ' + this.state.fname);
  }

  render() {
    return (
      <div className="example">
        <form onSubmit={this.handleSubmit}>
          <span>Square of:</span>
          <input type="text" value={this.state.value} onChange={this.handleChange} />
          <span>First name:</span>
          <input type="text" value={this.state.fname}  />
          <input type="submit" value="Submit" />
        </form>
        <div className="preview">
          <h1>Square of no is</h1>
          <div>{this.state.value * this.state.value}</div>
        </div>
      </div>
    );
  }
} 

ReactDOM.render(<EssayForm />, document.getElementById('app'));

.example {
  font-family: 'Open Sans', sans-serif;
  display: flex;
  padding: 20px;
  form {
    display: flex;
    align-items: flex-start;
    margin-right: 50px;
    * {
      margin-right: 10px;
    }
  }
  h1 {
    font-size: 20px;
    font-weight: bold;
  }
  .preview {
    white-space: pre;
  }
}

<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="app"></div>

帮我生成输入了用户名的警告框。

Answer 1

fname 状态没有任何更改处理程序。

请Refer This

Answer 2

您可以检查以下代码使其工作。

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            fname:'',
        };
    }

    handleChange(event, key) {
        let state = {};
        let value = event.target.value;
        state[key] = value;
        this.setState(state);
    }

    handleSubmit(event, name) {
        console.log(name);
        event.preventDefault();
        alert('Hello: ' + this.state.fname);
    }

    render() {
        return (
            <div className="example">
                <form onSubmit={(e) => this.handleSubmit(e)}>
                    <span>Square of:</span>
                    <input type="text"
                           value={this.state.value}
                           onChange={(e) => this.handleChange(e, "value")} />
                    <span>First name:</span>
                    <input type="text"
                           value={this.state.fname}
                           onChange={(e) => this.handleChange(e, "fname")}/>
                    <input type="submit" value="Submit" />
                </form>
                <div className="preview">
                    <h1>Square of no is</h1>
                    <div>{this.state.value * this.state.value}</div>
                </div>
            </div>
        );
    }
}

export default App;

Answer 3

您必须为文本更改创建另一个处理程序并正确更新 fname 的状态，并确保在更改方形输入值时不会覆盖 fname。

检查下面的代码：

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

    this.handleSquareChange = this.handleSquareChange.bind(this);
    this.handleTextChange = this.handleTextChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSquareChange(event) {
    this.setState({value: event.target.value});
  }

  handleTextChange(event) {
    this.setState({fname: event.target.value});
  }
 
  handleSubmit(event) {
    event.preventDefault();
    alert('Hello: ' + this.state.fname);
  }

  render() {
    return (
      <div className="example">
        <form onSubmit={this.handleSubmit}>
          <span>Square of:</span>
          <input type="text" value={this.state.value} onChange={this.handleSquareChange} />
          <span>First name:</span>
          <input type="text" value={this.state.fname} onChange={this.handleTextChange} />
          <input type="submit" value="Submit" />
        </form>
        <div className="preview">
          <h1>Square of no is</h1>
          <div>{this.state.value * this.state.value}</div>
        </div>
      </div>
    );
  }
} 

ReactDOM.render(<EssayForm />, document.getElementById('app'));

.example {
  font-family: 'Open Sans', sans-serif;
  display: flex;
  padding: 20px;
  form {
    display: flex;
    align-items: flex-start;
    margin-right: 50px;
    * {
      margin-right: 10px;
    }
  }
  h1 {
    font-size: 20px;
    font-weight: bold;
  }
  .preview {
    white-space: pre;
  }
}

<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="app"></div>

Answer 4

您缺少关于名字的 onChange 处理程序。此外，建议对名字使用另一个 onchange 侦听器，因为您不想在更新数字时更新数字值。这是代码的修改版本：

import React from 'react';

export class EssayForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            fname:'',
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

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

    handleNameChange(event){
        this.setState({fname: event.target.value});

    }

    handleSubmit(event) {
        event.preventDefault();
        alert('Hello: ' + this.state.fname);

    }

    render() {
        return (
            <div className="example">
                <form onSubmit={this.handleSubmit}>
                    <span>Square of:</span>
                    <input type="text" value={this.state.value} onChange=
                        {this.handleChange} />
                    <span>First name:</span>
                    <input type="text" value={this.state.fname}  onChange=
                        {this.handleNameChange} />
                    <input type="submit" value="Submit" />
                </form>
                <div className="preview">
                    <h1>Square of no is</h1>
                    <div>{this.state.value * this.state.value}</div>
                </div>
            </div>
        );
    }
}

一个显示警报的简单 ReactJS 示例

A simple ReactJS example to show alert

html

javascript

reactjs

react-dom