SeState не работает

Question

В своем нижеприведенном компоненте приложения я хочу скрыть div, основываясь на функции, которую я определил, но она выдает ошибку:

TypeError: Невозможно прочитать свойство 'setState' из неопределенного

Пожалуйста, что может быть не так

class Apps extends Component {
    constructor(props) {
        super(props);
        // Don't do this!
        this.state = { showing: true };
    }

    render() {
        return (
            <div>
             <div className="container">
                <div style={{ display: (this.state.showing ? 'block' : 'none') }}>
                     A Single Page web application made with react
                 </div>
             </div>
                <div className="buttons">
                    <a href='' onClick={this.onclick} >Login</a>
                    <br/>
                    <a href='' >Signup</a>
                    <br />
                    <a href='' >Members</a>
                </div>
            </div>
        );
    }

    onclick(e){
        e.preventDefault();
        this.setState({showing: false});
    }
}

Answer 1

Вы можете использовать функции стрелок ES6, чтобы связать лексику:

href = '' onClick = {(e) => this.onclick (e)}

Answer 2

@ Толле прав. Вы должны привязать свою функцию onclick к текущему экземпляру класса, используя this . По умолчанию это указывает на глобальное окно obj, в котором нет функции setState.

1. Либо вы связываете свою функцию с этим , где вы вызываете ее, как предполагает Толле.

2. Вы также можете связать это с этим в конструкторе после вызова super (props):

   this.onclick = this.onclick.bind (this);

3. это также может быть неявно связано с помощью функции стрелки, подобной этой:

   this.onclick (e)} ... ./>

Рекомендуется использовать 2-й вариант. При использовании 1-го и 3-го вариантов будут создаваться новые ссылки для функций каждый раз при визуализации компонента. Тем не менее, можно использовать 1-й или 3-й вариант, если у вас нет проблем с использованием памяти или созданием небольшого приложения.

Answer 3

Вы можете использовать связывание или вы можете просто использовать функцию стрелки ES6 вместо того, чтобы связывать ее

 onclick = (e) => {
    e.preventDefault();
    this.setState({ showing: false });
  }

Answer 4

Вы можете, например, bind функция к this в методе рендеринга, так что this будет тем, что вы ожидаете в вашем onclick методе. Вы можете узнать больше о том, почему это так в документации .

<a href='' onClick={this.onclick.bind(this)}>Login</a>