0

Я просто изучал React по материалам где все уроки были построены на классах и обычных this.setState, без хуков, и сейчас путаюсь, потому-что думаю так как учили, а тут уже что-то новое и каша какая-то получается у меня. В перспективе конечно хочу и хуки виучить, и компонеты на основе функций, но пока не хочу смешивать что б лучше разобраться.

<div id="app"></div>

function App() {
  const [ dark, setDark ] = React.useState(null);
  const updateDark = e => setDark(e.type === 'mouseover' ? e.currentTarget.id : null);

  return (
    <React.Fragment>
      {[ 'left', 'right' ].map(n => (
        <div
          id={n}
          key={n}
          onMouseOver={updateDark}
          onMouseLeave={updateDark}
          className={dark && dark !== n ? 'dark' : ''}
        ></div>
      ))}
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

1 ответ 1

1

Вот так будет:)

<div id="app"></div>

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            dark: null,
        }
    }


    updateDark = e => {
        this.setState({
            dark: e.type === 'mouseover' ? e.currentTarget.id : null
        })
    };

    render() {
        const {dark} = this.state;
        return (
            <React.Fragment>
                {[ 'left', 'right' ].map(n => (
                    <div
                        id={n}
                        key={n}
                        onMouseOver={this.updateDark}
                        onMouseLeave={this.updateDark}
                        className={dark && dark !== n ? 'dark' : ''}
                    />
                ))}
            </React.Fragment>
        )
    }
};

ReactDOM.render(<App />, document.getElementById('app'));

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.