react 表单元素radio

最新推荐文章于 2023-08-14 16:25:54 发布

前端岚枫

最新推荐文章于 2023-08-14 16:25:54 发布

阅读量7.7k

点赞数 1

分类专栏： react 文章标签： radio react checked prop bind

本文链接：https://blog.csdn.net/lfcss/article/details/79641942

版权

react 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

class App extends Component{
    constructor(props){
        super(props)
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            radioValue:''
        }
    }
    handleChange(e){
        this.setState({
            radioValue:e.target.value
            }
        )
    }
    render(){
        const{radioValue}=this.state;
        return(
            <div>
                <p>gender:</p>
               <label>
                   male：
                   <input
                       type="radio"
                       value="male"
                       checked={radioValue==='male'}
                       onChange={this.handleChange}/>
               </label>
                <label>
                    female：
                    <input
                        type="radio"
                        value="female"
                        checked={radioValue==='female'}
                        onChange={this.handleChange}/>
                </label>
            </div>
        )
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('app')

)