Javascript 显示警报的简单示例

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

这是HTML和CSS：

类EssayForm扩展了React.Component{ 构造器{ 超级作物； 此.state={ 值：， fname:， }; this.handleChange=this.handleChange.bindthis； this.handleSubmit=this.handleSubmit.bindthis； } HandleChange事件{ this.setState{value:event.target.value}； this.setState{fname:event.target.fname}； } 把手排气管{ 违约事件； 警报“Hello:”+this.state.fname； } 渲染{ 回来 平方： 名字： 否的平方是 {this.state.value*this.state.value} ; } } ReactDOM.render，document.getElementById'app'； .举例{ 字体系列：“开放式Sans”，无衬线； 显示器：flex； 填充：20px； 形式{ 显示器：flex； 调整项目：灵活启动； 右边距：50px； * { 右边距：10px； } } h1{ 字体大小：20px； 字体大小：粗体； } .预览{ 空白：预处理； } }

---

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

---

请检查以下代码以使其正常工作

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;

---

您必须为文本更改创建另一个处理程序，并正确更新fname的状态，并且确保在更改square输入值时不重写fname

检查以下代码：

类EssayForm扩展了React.Component{ 构造器{ 超级作物； 此.state={ 值：， fname:， }; this.handleSquareChange=this.handleSquareChange.bindthis； this.handleTextChange=this.handleTextChange.bindthis； this.handleSubmit=this.handleSubmit.bindthis； } handleSquareChangeevent{ this.setState{value:event.target.value}； } handleTextChangeevent{ this.setState{fname:event.target.value}； } 把手排气管{ 违约事件； 警报“Hello:”+this.state.fname； } 渲染{ 回来 平方： 名字： 否的平方是 {this.state.value*this.state.value} ; } } ReactDOM.render，document.getElementById'app'； .举例{ 字体系列：“开放式Sans”，无衬线； 显示器：flex； 填充：20px； 形式{ 显示器：flex； 调整项目：灵活启动； 右边距：50px； * { 右边距：10px； } } h1{ 字体大小：20px； 字体大小：粗体； } .预览{ 空白：预处理； } }

---

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

---

您正在使用event.target.fname覆盖此.state.fname，它不存在，因此未定义。实时代码：为什么不直接使用官方react页面中提供的？它准确地显示了您正在尝试的内容achieve@kboul看起来这正是OP所使用的，试图扩展它，但并不知道如何实现；OP的代码有这样一个.setState{fname:event.target.fname}；这就是所谓的。无论如何，答案不可能仅仅链接到其他地方。它必须在文本中包含修复。您的handleChange正在直接操纵this.state，这是您不应该做的。让state=this.state；没有复制，甚至没有肤浅的。谢谢@ChrisG告诉我们这个问题。我已经用修复程序更新了代码。我不认为在generalAgreed@ChrisG中为每一个添加一个单独的处理程序方法是一个好主意，您可以始终传入on change函数，输入调用的是{handleChange}并相应地更新状态我不认为为每个添加单独的处理程序方法是一个好主意general@ChrisG你是对的，它可以分解，我只是想向他展示问题的解决方案，而不是性能；但好的一点是肯定的，但在我看来，如果有机会，一个问题应该总是教好的做法，而不仅仅是解决眼前的问题，否则默认情况下它教坏的做法，我们将继续招收学生。