Получение значения проверенной радиокнопки с использованием Material UI Radio
Я создаю форму и теперь пытаюсь выполнить некоторую проверку ввода, и я изо всех сил пытаюсь получить проверенное значение из моего радиокомпонента.
В одном файле у меня есть:
<FormControl component = "fieldset" name = "method-of-payment">
<RadioGroup onChange = {this.handleChangeEvent} >
<FormControlLabel value = "credit" control = {<Radio />} label = "Credit Card"/>
<FormControlLabel value = "check" control = {<Radio />} label = "Check"/>
<FormControlLabel value = "purchase-order" control = {<Radio />} label = "Purchase Order"/>
</RadioGroup>
</FormControl>
И я пытаюсь получить значение, делая это в другом файле (это сработало для всего остального):
this.setState({
method-of-payment: document.getElementsByName('method-of-payment')[0].value
})
Но мне не повезло получить правильное значение.
Я ценю любую помощь.
Обновлено: вот ссылка на документацию, которой я следовал: https://material-ui.com/components/радио-кнопки/
Ответы 3
Похоже, что это может быть подход, подверженный ошибкам, и в целом прямой доступ к элементам является анти-шаблоном React.
Лучшим способом было бы сохранить проверенное значение элемента <Radio> как свойство в вашем состоянии. Используйте реквизит onChange вашего <RadioGroup>, чтобы подключиться к изменению выбора, сохраните его в своем состоянии и используйте его в реквизите value вашего содержащего <RadioGroup>.
Вы должны добавить прослушиватель событий, а затем обновить свое состояние на основе value, которое вы можете получить от события. Если вы подключите его таким образом, вам не нужно обращаться к элементу, чтобы найти его значение — вы уже знаете его, поскольку он находится в вашем состоянии.
Базовый пример будет выглядеть примерно так:
class MyForm extends Component {
state = { selected: "credit" };
handleChangeEvent = ev => {
this.setState({ selected: ev.target.value });
};
render() {
const { selected } = this.state;
return (
<FormControl component = "fieldset" name = "method-of-payment">
<RadioGroup onChange = {this.handleChangeEvent} value = {selected}>
<FormControlLabel
value = "credit"
control = {<Radio />}
label = "Credit Card"
/>
<FormControlLabel value = "check" control = {<Radio />} label = "Check" />
<FormControlLabel
value = "purchase-order"
control = {<Radio />}
label = "Purchase Order"
/>
</RadioGroup>
</FormControl>
);
}
}
это выглядит проще
document.querySelector('[name = "method-of-payment"]:checked')
Определите свое изменение, как показано ниже
onChange = {(e, val)=>console.info(val)
Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать добавьте дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
Очень ценю ответ! На самом деле это выглядит почти идентично моему коду, я, вероятно, должен был показать все. Проблема заключается в том, чтобы найти способ получить это текущее значение состояния из другого файла, который выполняет проверку.