Реакция компонента не обновляется после события onClick

Question

Реакция компонента не обновляется после события onClick

Вы можете использовать функцию и вернуть компонент и удержать тонкую функцию рендеринга

class App extends React.Component {
  constructor (props) {
    super(props);
    this._renderAppBar = this._renderAppBar.bind(this);
  }

  render () {
    return <div>
      {_renderAppBar()}

      <div>Content</div>

    </div>
  }

  _renderAppBar () {
    if (this.state.renderAppBar) {
      return <AppBar />
    }
  }
}

1

javascript reactjs typescript ecmascript-6

задан Null isTrue 16 January 2019 в 03:10

3 ответа

Другие вопросы по тегам:

javascript reactjs typescript ecmascript-6

Похожие вопросы:

score 0 · Answer 1

Потому что ваши .appendSpan() возвращаются реагируют, но возвращаются в рамках события onClick.

Когда вы говорите <p>Are they both heroes? {appendSpan()}</p>, вы фактически указываете приложению добавить интервал внутри тега <p> ...

Но onClick={appendSpan}, где вы говорите, чтобы добавить? Вы не сказали, куда добавить. Так что он никогда не будет добавлен в дерево DOM

score 0 · Answer 2

Вместо этого вы можете изменить компонент Heroes на компонент с состоянием и обновить его по щелчку или использовать Крючки

Обновление для TSX

[ 1112]

class Heroes extends React.Component <{}, any> {
    // for fututre reasons, these variables must leave within this component
    private thor = "isHero";
    private hulk = "isHero";

    constructor(props) {
      super(props);
      this.state = {
        showButton: false
      };
    }

    appendSpan() {
      // update the state to show the button
      this.setState({
        showButton: true
      });
    }

    render() {
      const { showButton } = this.state;
      let button = this.thor === this.hulk ? <span> yes </span> : <span>no</span > ;
      return ( <p onClick={() => this.appendSpan()}> Are they both heroes ? 
        { showButton ? button : '' } 
        </p>);
      }
}

function App() {
  return ( <div className = "App" >
      <Heroes/>
    </div>
  );
}

Еще одно обновление с реагирующими крючками , введенное в React v16.8.0-alpha. 0

// import useState hooks
import { useState } from 'react';

const Heroes: React.SFC<any> = () => {
  // for fututre reasons, these variables must leave within this component
  const thor = "isHero";
  const hulk = "isHero";
  
  // declare a new state variable flag and the update function setFlag
  const [flag, setFlag] = useState(false);
  
  let button = thor === hulk ? <span> yes </span> : <span> no </span >;

  return (<p onClick={() => setFlag(true)}>Are they both heroes?
    {flag ? button : ''}
  </p>);
};

function App() {
  return (
    <div className="App">
      <Heroes />
    </div>
  );
}

создали здесь песочницу для реализации с реагирующими хуками.

score 0 · Answer 3

Возвращение из функции appendSpan должно быть частью того, что вы возвращаете в функции рендеринга.

Вы можете сохранить состояние компонента приложения и написать функцию onClick, которая изменяет состояние. Передайте onClick и состояние компоненту Heroes в качестве реквизита. В зависимости от состояния, которое вы получили от реквизита, решите, что делать.

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