Включение и отключение элементов формы в React
(Я новичок в React, поэтому извиняюсь, если это кажется глупым вопросом).
У меня есть элемент управления React, где я просто хочу иметь возможность выбрать кнопку и отключить эту кнопку, а другую - включить; Например:
class MyControl extends Component<IMyControlProps> {
...
public render() {
var isRunning = false;
return (
<Button name = "btnStart" disabled = {isRunning} onClick = { () => {
isRunning = true;
this.props.RunningFunc;
}}>Start Running</Button>
<Button name = "btnStop" disabled = {!isRunning} onClick = { () => {
isRunning = false;
this.props.StopRunningFunc!
}}>Stop!</Button>
...
Однако нажатие кнопки запуска не влияет на состояние кнопки остановки. Есть ли метод или функция, которую нужно вызвать для принудительного обновления?
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов
Проще говоря, компонент - это фабрика для создания элементов.
0
0
24
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Вы должны использовать переменную состояния!
Нравится:
return (
<Button name = "btnStart" disabled = {this.state.isRunning} onClick = { () => {
this.setState({ isRunning: true });
this.props.RunningFunc;
}}>Start Running</Button>
<Button name = "btnStop" disabled = {!this.state.isRunning} onClick = { () => {
this.setState({ isRunning: false });
this.props.StopRunningFunc!
}}>Stop!</Button>
Ответ принят как подходящий
Попробуйте перенести isRunning в состояние. Когда вы обновляете состояние, вызывается функция рендеринга и обновляется ваш графический интерфейс.
state = {isRunning: false};
public render() {
return (
<Button name = "btnStart" disabled = {this.state.isRunning} onClick = { () => {
this.setState({isRunning:true});
this.props.RunningFunc;
}}>Start Running</Button>
<Button name = "btnStop" disabled = {!this.state.isRunning} onClick = { () => {
this.setState({isRunning:false});
this.props.StopRunningFunc;
}}>Stop!</Button>
Другие вопросы по теме
Как я могу создать псевдоним для одного импорта?
Использование рабочего загрузчика webpack с причинами машинописного текста не может найти ошибку модуля
Выпадающий список в раскрывающемся списке исчезает Angular 5
Проблема с зависимостью от однорангового узла при установке библиотеки angular
Typescript не может назначить литерал объекта универсальному типу
В TypeScript, когда использовать <> и когда использовать:
Ошибка порядка выполнения машинописного текста
Ngx-bootstrap - закрыть всплывающее окно после того, как курсор покинет само всплывающее окно
Обновление реактивного состояния по определенному индексу изменяет массив на объект
D3: Zoom не сбрасывает масштаб
Похожие вопросы
React ignore .prettierignore файл [Обновлено: ничего общего с красивее]
API не возвращает правильный JSON (react / express / axios)
Как добавить динамический идентификатор в FormattedMessage в React Intl
В TypeScript, когда использовать <> и когда использовать:
RangeError: превышен максимальный размер стека вызовов при установке минимальной-максимальной даты
Draft.js - CompositeDecorator: есть ли способ передать информацию из стратегии в компонент?
Значения объекта Redux Form Wizard проверяются
При повторной выборке с помощью Apollo обновляются все экземпляры этого запроса, даже с разными параметрами
Обновление реактивного состояния по определенному индексу изменяет массив на объект
FlexibleWidthXYPlot требует фиксированной ширины для рендеринга