ReactJS: Как правильно описать контролируемый компонент (Controlled Components)?

Ловлю ошибку
Warning: A component is changing an uncontrolled input of type radio to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components


По ссылке выше есть не плохой пример с event.preventDefault();,
но как быть, если помимо event мне нужно передать еще параметры?

class Question extends React.Component {
	render() {
		return(
				<button className="btn btn2 exam-question__btn exam-question__btn-submit"
						onClick={this.handleClickAnswerCheck.bind(this, param1, param2)}>Ответить</button>
									
		)
	}
	handleClickAnswerCheck = (param1, param2) => {
		let answer = document.getElementsByName('q'+param1);
		
		//answer - это input type="radio"
		//он и вызывает ошибку при клике на button
		
		//как запустить здесь
		//event.preventDefault(); или event.target...
		//?
	}
}
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
@Dasslier
FrontEnd Developer
1. Вы используете синтаксис полей классов, так что в этом onClick={this.handleClickAnswerCheck.bind(this, param1, param2)} нет нужды. Используйте так onClick={(e) => handleClickAnswerCheck(e, param1, param2)}
2. Вам нужно рендерить ваш радиобаттон через React, и его состояние хранить в state, а не читать его напрямую из DOM, поэтому реакт и ругается
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега JavaScript
помимо event мне нужно передать еще параметры

Засуньте их в data-атрибуты - будут доступны через event.target.dataset.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Myagi Минск
от 3 000 до 4 000 usd.
от 100 000 руб.
iBolit.pro Москва
от 170 000 до 250 000 руб.
06 дек. 2019, в 17:44
5000 руб./за проект
06 дек. 2019, в 17:41
1500 руб./за проект
06 дек. 2019, в 17:10
3000 руб./за проект