Получение значения отмеченного переключателя с помощью Material UI Radio - PullRequest
Новая
       48

Получение значения отмеченного переключателя с помощью Material UI Radio

0 голосов
/ 17 июня 2019

Я создаю форму и сейчас пытаюсь выполнить некоторую проверку ввода, и я пытаюсь получить проверенное значение из моего радиокомпонента.

В одном файле у меня есть: 

<FormControl component="fieldset" name="method-of-payment">
    <RadioGroup onChange={this.handleChange} >
        <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 / компоненты / радио-кнопки /

1 Ответ

1 голос
/ 17 июня 2019

Похоже, что это может быть склонный к ошибкам подход, и в целом прямой доступ к элементам является антипаттерном React.

Лучшим способом было бы сохранить проверенное значение элемента <Radio> какнедвижимость в вашем штате.Используйте onChange реквизит вашего <RadioGroup>, чтобы подключиться к нему при изменении выбора, сохраните его в своем состоянии и используйте его в value реквизит вашего содержащего <RadioGroup>.

Вы должны добавить прослушиватель событий, а затем обновить свое состояние, основываясь на value, которое вы можете получить из события.Если вы подключите его таким образом, вам не нужно будет обращаться к элементу, чтобы найти его значение - вы уже знаете, как он находится в вашем состоянии.

Базовый пример будет выглядеть примерно так: 

class MyForm extends Component {
  state = { selected: "credit" };
  handleChange = ev => {
    this.setState({ selected: ev.target.value });
  };
  render() {
    const { selected } = this.state;
    return (
      <FormControl component="fieldset" name="method-of-payment">
        <RadioGroup onChange={this.handleChange} 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>
    );
  }
}

Кодовый код здесь

...