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

【问题标题】：A simple ReactJS example to show alert一个显示警报的简单 ReactJS 示例
【发布时间】：2019-08-07 07:31:18
【问题描述】：

我是 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>

帮助我生成输入用户名的警报框。

【问题讨论】：

您正在用event.target.fname 覆盖this.state.fname，它不存在，因此未定义。直播代码：codesandbox.io/s/shy-grass-hkvkz
为什么不直接使用官方 react 页面中提供的example 呢？它准确地显示了您想要实现的目标
@kboul 看起来这正是 OP 使用的，试图扩展它但不知道如何。

标签： javascript html reactjs react-dom

【解决方案1】：

您在名字上缺少 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>
        );
    }
}

【讨论】：

我不认为为每个 <input> 添加单独的处理程序方法通常是一个好主意
同意@ChrisG，您可以随时传入 on change 函数，输入调用 {handleChange } 的内容并相应地更新状态

【解决方案2】：

您必须为文本更改创建另一个处理程序并正确更新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>

【讨论】：

我不认为为每个 <input> 添加单独的处理程序方法通常是一个好主意
@ChrisG 你是对的，它可以分解，我只是想向他展示他的问题的解决方案，而不是在性能上工作；）（但无论如何都是好点）
当然，但是如果有机会，imo 问题应该始终教导良好的做法，而不仅仅是解决眼前的问题，否则默认情况下它会教导不良做法，我们将继续吸引 w3schools 学生。跨度>

【解决方案3】：

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

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;

【讨论】：

你的handleChange 直接操纵this.state，这是你不应该做的。 let state = this.state; 不会创建副本，甚至不会创建浅副本。
感谢@ChrisG 告知问题。我已经用修复更新了代码。

【解决方案4】：

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

请Refer This

【讨论】：

技术上这不是真的； OP 的代码有 this.setState({fname: event.target.fname}); 确实被调用了。无论如何，答案不能只是链接到其他地方。它必须在文本中包含修复。