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]

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

В документации написано.

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

onClick={this.handleClickAnswerCheck.bind(this, param1, param2)}>

handleClickAnswerCheck = (param1, param2) => {
	...

	//как запустить здесь
	//event.preventDefault(); или event.target...
	//?

Так уже всё передаётся. То, что функция создана методом bind, вовсе не означает, что она не может принимать иных значений, помимо привязанных. Чтобы получить доступ к объекту события, надо его в списке параметров указать - после тех, чьи значения вы привязываете:

<button onClick={this.onClick.bind(this, param1, param2)}>click me</button>

onClick(param1, param2, e) {
  e.preventDefault();
  console.log(e.target);
}

Можно сделать чуть покороче, и принимать объект события не последним, а каким угодно:

<button onClick={e => this.onClick(e, param1, param2)}>click me</button>

onClick(e, param1, param2) {
  ...
}

Ещё вариант - если значения являются примитивными, то можно засунуть их в data-атрибуты, будут доступны через event.target.dataset:

<button onClick={this.onClick} data-param1={param1} data-param2={param2}>click me</button>

onClick = e => {
  const { param1, param2 } = e.target.dataset;
  ...
}