Как организовать взаимодействе нескольких компонентов в React js?

Question

[Jeket]

Приветствую!

Есть приложение:

import React from 'react';
import Point from './point';
import Line from './line';

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

export default App;

Компоненты:

class Line extends Base {
  render() {
    return (
      <button>
       Линия
      </button>
    );
  }
}

И

class Point extends Base {
  render() {
    return (
      <button>
       Точка
      </button>
    );
  }
}

import React from 'react';

class Base extends React.Component {
  constructor(props){
    super(props);
    this.state = {isToggleOn: true};
  }

  render(){
    return (
      <input/>
    )
  }
}

export default Base;

Как сделать так, чтобы при нажатии на кнопку "Линия" делать disable кнопки "Точка".
Подразумевается, что кнопок будет много и надо при нажатии одной делать disable остальных.

Пробовал на Redux или через родителя this.setState, но ничего не получилось.

Comments

[Сергей Сунцев]

Пробовал на Redux или через родителя this.setState, но ничего не получилось.

Как вы пробовали?

[Jeket]

Сергей Сунцев, как в данной статье https://habr.com/ru/post/269831/
Бросил на этапе настройки devtools (не взлетело, наверное что-то не так сделал). В целом, городить зоопарк рад инструментов не хочется (странно что в браузере нет встроенной отладки).

[Сергей Сунцев]

Jeket, нет это не странно, не все же пользуются реактом. react-devtools можно просто поставить в хроме , через меню->дополнительные инструменты->расширения

Answer 1

[hzzzzl]

function App() {
  const [current, setCurrent] = React.useState(null)
  
  return (
    <div className="App">
      <Point disabled={current !== 'Point'} onClick={() => setCurrent('Point')} />
      <Line  disabled={current !== 'Line'} onClick={() => setCurrent('Line')} />
    </div>
  );
}


class Line extends Base {  // какой еще Base?
  render() {
    return (
      <button disabled={this.props.disabled} onClick={this.props.onClick}>
       Линия
      </button>
    );
  }
}

Comments

[Jeket]

Добавил Base в вопрос. Но в целом, ваше решение мне кажется подходящим.