Реакция не дает ответ - PullRequest
Новая
       5

Реакция не дает ответ

0 голосов
/ 24 апреля 2020

Спасибо, что посетили мой вопрос. Я делаю простой калькулятор через реакцию. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>Task 4</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
    </head>
<body>
<div id="calculator"/>
<script type="text/babel">
    var Calculate=React.createClass({
        getInitialState:function(){
            return{
                 firstvalue: 0, secondvalue: 0, operation : "+", answer: 0
                 }
        },
        handleFirstValueChange(event)
        {
            var localvalue=event.target.value.replace(/\s+/g, ' ').trim()
            this.setState({
                firstvalue:localvalue
            });
            this.Answer()
        },
        handleSecondValueChange(event)
        {
            var localvalue=event.target.value.replace(/\s+/g, ' ').trim()
            this.setState({
                secondvalue:localvalue
            })
            this.Answer()
        },
        handleSum(event)
        {
            this.setState({
                operation:"+",
            })
            this.Answer()
        },
        handleSub(event)
        {
            this.setState({
                operation:"-"
            })
            this.Answer()
        },
        handleMul(event)
        {
            this.setState({
                operation:"*"
            })
            this.Answer()
        },
        handleDiv(event)
        {
            this.setState({
                operation:"/"
            })
            this.Answer()
        },
        Answer()
        { 
            switch(this.state.operation)
            {
                case "+" :
                this.setState({
                    answer:Number(this.state.firstvalue)+Number(this.state.secondvalue)
                    })
                    break; 
                case "-" :
                this.setState({
                    answer:Number(this.state.firstvalue)-Number(this.state.secondvalue)
                    }) 
                    break;
                case "*" :
                this.setState({
                    answer:Number(this.state.firstvalue)*Number(this.state.secondvalue)
                    })
                    break;
                case "/":
                this.setState({
                    answer:Number(this.state.firstvalue)/Number(this.state.secondvalue)
                    }) 
                    break;
            }
        },
        render:function(){
            return(
            <div>
            <input type="text" className="search-field" onChange={this.handleFirstValueChange}/>
            <input type="text" className="search-field" onChange={this.handleSecondValueChange}/>
            <div/>
            <button onClick={this.handleSum}>
            Сложить
            </button>
            <button onClick={this.handleSub}>
            Вычесть
            </button>
            <button onClick={this.handleMul}>
            Умножить
            </button>
            <button onClick={this.handleDiv}>
            Поделить
            </button>

            <div>{this.state.firstvalue} {this.state.operation} {this.state.secondvalue} ={this.state.answer} </div>
            </div>
            )}
    });
    ReactDOM.render(
             <Calculate/>,
             document.getElementById("calculator")
         );
</script>
</body>
</html>

Я хочу сделать ответ, когда я редактирую первое или второе поле. Но он рендерит только после нажатия кнопки или редактирования поля снова. Я не вижу, как исправить, я думаю, что это может быть с рендером, но я вызываю функцию Answer () в этих 2 полях, и она не дает мне результата. Я пытаюсь связать Answer () с событием в рендере, но оно не дало успеха. Большое спасибо. Первые 2 scr это переполнение стека. Я хочу этот результат. Отредактируйте поле или кнопку и дайте ответ немедленно.

1 Ответ

0 голосов
/ 24 апреля 2020

this.state НЕ мутирует при вызове this.setState () - вы можете вычислить ответ от render как обычную переменную или использовать this.Answer (localvalue) вместо чтения предыдущего состояния из this.state - Aprillion 30 минут назад Большое спасибо. Я добавляю const Answer = this.Answer (); в рендере

...