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

Question

[Павел Кизернис]

Ловлю ошибку

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...
		//?
	}
}

Comments

[bpGusar]

к слову, если вы пишите стрелочную функцию то она автоматически биндится, и не нужно писать вот так this.handleClickAnswerCheck(param1, param2) в онклик

Answer 1

[Павел Диденко]

1. Вы используете синтаксис полей классов, так что в этом onClick={this.handleClickAnswerCheck.bind(this, param1, param2)} нет нужды. Используйте так onClick={(e) => handleClickAnswerCheck(e, param1, param2)}
2. Вам нужно рендерить ваш радиобаттон через React, и его состояние хранить в state, а не читать его напрямую из DOM, поэтому реакт и ругается

Answer 2

[0xD34F]

помимо event мне нужно передать еще параметры

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