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

Question

I am new to reactjs. I am using two text boxes one allows user to enter a number and display its square and another one to enter user first name and when click on submit button an alert box should come saying hello username. I am able to produce the square but the alert is not working properly.

This is the 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> 

Help me out in producing alert box with username entered.

Answer 1

You can check the following code to make it work.

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 2

You have to create another handler for text change and to update the state of fname properly, and make sure you do not override fname when changing square input value.

Check the code below:

 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 3

You are missing onChange handler on first name. Also it's advisable to use another onchange listener for first name as you do not want to update number value when you update the number. Here is a modified version of the code:

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>
        );
    }
}

Answer 4

There is no any change handler for fname state.

Please Refer This