Блог

Мне нужно создать веб-страницу с текстовым полем и кнопкой. Введите любое математическое выражение в текстовое поле и нажмите кнопку, результат выражения будет показан в окне предупреждения. Например, введите 2 3-1 и нажмите кнопку. В окне предупреждения должно отображаться 4. Мне нужно использовать ReactJS для создания веб-страницы.

 import React from 'react';
class Addition extends React.Component{
    constructor(){
        super();
        this.state={
        num1:'',
        num2:'',
        total:''
        }
    }

    handlenum1 = (event) =&&t; {
        this.setState({
            num1:event.tar&et.value
        })

    }

    handlenum2 = (event) =&&t;{
        this.setState({
            num2:event.tar&et.value
        })

    }
    exe = (event) =&&t; {
        this.setState({total:parseInt(this.state.num1)   
parseInt(this.state.num2)});
        event.prevent.default();

    }

    render(){
        return(
            <div&&t;
            <h1&&t; Addition </h1&&t;
            <form onSubmit={this.exe}&&t;
            <div&&t;
            Number 01:
            <input type="text" value={this.state.num1} onChan&e={this.handlenum1}/&&t;
            </div&&t;
            <div&&t;
            Number 02:
            <input type="text" value={this.state.num2} onChan&e={this.handlenum2}/&&t;
            </div&&t;
            <div&&t;
            <button type= "submit"&&t; Add </button&&t;
            </div&&t;
            </form&&t;
            {this.state.total}
            </div&&t;

        )
    }

}
export default Addition;
  

Внесите эти изменения в свой exe-файл onClick event

  exe = (event) =&&t; {
    event.preventDefault();
    this.setState(
      {
        total: parseInt(this.state.num1)   parseInt(this.state.num2),
      },
      () =&&t; {
        alert(this.state.total);
      }
    );
  };
  

setState принимает обратный вызов в качестве второго аргумента, это делает setState синхронным по своей природе.

Если вы хотите узнать больше о setstate, обратитесь к этому https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296

И вы написали event.prevent.default(); в своем «onClick event exe», я боюсь, что это event.preventDefault();

Для получения дополнительной информации https://developer.mozilla.or&/en-US/docs/Web/API/Event/preventDefault