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

Question

У меня ниже переключатель "Компонент"

import React from 'react';
import PropTypes from 'prop-types';


export default class RadioButton extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange = (event) => {
        this.props.handleChange(event);
    }
    render() {
        return (
            <div>           
            <input type="radio" name="measureValue" value={this.props.value} onChange={this.handleChange} checked={true}/>
            <label>{this.props.value}</label>
            </div>

        );
    }
}

Я использую этот компонент как

handleRadioSelect = (event) =>{
        this.setState({
            selectedRadioValue : event.target.value 
         })
    }

<RadioButton value="Fact" handleChange = { this.handleRadioSelect }/>

Теперь я получил ошибку, так как handleChnage не является функцией.

Answer 1

, чтобы получить значение флажка, используйте event.target.checked вместо event.target.value, чтобы:

 handleRadioSelect = (event) =>{
    this.setState({
        radioChecked : event.target.checked
     })
 } 

И ваша ошибка появилась, потому что вам нужно использовать функцию стрелки для этого.handleCheck (чтобы вы могли передавать реквизиты событий) так:

onChange={e => this.handleCheck(e)}

В этом случае вам больше не нужно связывать его, а просто используйте обычную функцию для handleCheck, чтобы:

handleChange(event) {
    this.props.handleChange(event);
}

Вот как я обычно к этому отношусь, надеюсь, это поможет!

Answer 2

handleChange = (event) => {
   let target = event.target;
   let name = target.name;
   let value = target.type === 'checkbox' ? target.checked : target.value;
   this.setState({
       [name] : value
   })
}

Надеюсь, это поможет