Реагирует на троичный оператор в HTML, не представляя правильный HTML - PullRequest
Новая
       7

Реагирует на троичный оператор в HTML, не представляя правильный HTML

0 голосов
/ 07 мая 2018

Я очень плохо знаком с React, и у меня возникли проблемы с тем, что, как я думал, будет простым троичным оператором. Я просто пытаюсь отобразить знак минус по умолчанию и знак плюс при нажатии. Я написал троичный оператор в своем JSX и установил начальное состояние компонента как ложное, логическое, и переключал его при нажатии. Кажется довольно просто.

По умолчанию на странице отображается знак плюс, и я не знаю почему. Когда я нажимаю на него, он не меняется, и в файле console.log, который у меня есть, отображается логическое значение. Кто-нибудь есть идеи, что случилось? Заранее спасибо. Вот код для моего компонента: 

import React, { Component } from 'react';

class Header extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showMinus: false,
        };


        this.changeSign = () => {
            this.state.showMinus = !this.state.showMinus;
            console.log('CLICKED ', this.state.showMinus);
        }
    };

    render() {
        return (
            <div className="header">
                <div>State: {this.state.showMinus}</div>
                <div>30%</div>
                <div>$200000</div>
                <div>85%</div>
                <div>
                    {this.state.showMinus ? <span className="plusOrMinus" onClick={this.changeSign}> - </span>
                        :
                    <span className="plusOrMinus" onClick={this.changeSign}> + </span>}
                </div>
            </div>
        );
    }
}

export default Header;

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

У вас мало проблем в вашем коде. Для обновления состояния всегда используйте this.setState 

import React, { Component } from 'react';

    class Header extends Component {
        constructor(props) {
            super(props);

            this.state = {
                showMinus: false,
            };


            changeSign = () => {
                this.setState({ showMinus = !this.state.showMinus })
                console.log('CLICKED ', this.state.showMinus);
            }
        };

        render() {
            return (
                <div className="header">
                    <div>State: {this.state.showMinus}</div>
                    <div>30%</div>
                    <div>$200000</div>
                    <div>85%</div>
                    <div>
                        {this.state.showMinus ?  <span className="plusOrMinus" onClick={this.changeSign}> + </span>
                            : <span className="plusOrMinus" onClick={this.changeSign}> - </span>
                       }
                    </div>
                </div>
            );
        }
    }

    export default Header;
0 голосов
/ 07 мая 2018

Reactjs - это стиль функционального программирования, идея в том, чтобы ваш код оставался неизменным. В React есть метод установки состояния с использованием функции setState . То, что вы делаете в этой строке this.state.showMinus = !this.state.showMinus;, изменяет ваше состояние, что не вызывает повторного запуска в реакции.

Измените эту строку кода на: this.setState({ showMinus: !this.state.showMinus }), и она должна работать.

...