react 表单元素radio

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')

)

猜你喜欢

转载自blog.csdn.net/yilanyoumeng3/article/details/79641942
今日推荐