react-jsx语法

react - jsx 语法之双向绑定的单选框实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.min.js"></script>
    <title>react - 事件</title>
</head>
<body>

    <div id="app">
        
    </div>

    <script type="text/babel">

        class Radiobox extends React.Component{
            constructor(){
                super()
                this.state={
                    radioval:""
                }

                // 事件性能优化
                this.handleRadio = this.handleRadio.bind(this)
            }
            render(){
                let radioval = this.state.radioval
                return (
                    <div className="radioBox">
                        <label htmlFor="sex"></label>
                        <input type="radio" value="boy" checked={radioval === "boy"} onChange={this.handleRadio.bind(this)}/>男<br/>
                        <input type="radio" value="girl" checked={radioval === "girl"} onChange={this.handleRadio.bind(this)}/>女<br/>
                        <p>您选择的性别是:{radioval}</p>
                        </div>
                )
            }
            handleRadio(e){
                console.log("选择性别是： ",e.target.value)
                this.setState({
                    radioval: e.target.value
                })
            }
        }

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



</body>
</html>

React - jsx 之复选框实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.min.js"></script>
    <title>react - 复选框</title>
</head>
<body>

    <div id="app"></div>

    <script type="text/babel">
        class Radiobox extends React.Component{
            constructor(){
                super()
                this.state={
                    hobbies: []
                }

                // 事件性能优化this.handleCkeckedBox = this.handleCkeckedBox.bind(this)
            }
            render(){
                let {radioval,hobbies} = this.state
                return (
                    <div className="radioBox">
                        <p className="hobby"></p>
                        <label htmlFor=""><input type="checkbox" value="抽烟"  onChange={this.handleCkeckedBox}/>抽烟</label>
                        <label htmlFor=""><input type="checkbox" value="喝酒"  onChange={this.handleCkeckedBox}/>喝酒</label>
                        <label htmlFor=""><input type="checkbox" value="上网"  onChange={this.handleCkeckedBox}/>上网</label>
                        <label htmlFor=""><input type="checkbox" value="睡觉"  onChange={this.handleCkeckedBox}/>睡觉</label>
                        <ul className="box">
                            <p>你的爱好有 ： </p>
                            {
                                hobbies.map((ele)=>{
                                    return (
                                        <li className="hoibby" key={ele}>{ele}</li>
                                    )
                                })
                            }  
                        </ul>
                    </div>
                )
            }

            handleCkeckedBox(e){
                let val = e.target.value
                let arr =  this.state.hobbies
                let flag = arr.includes(val)
                if(flag){
                    let index = arr.indexOf(val)
                    arr.splice(index,1) 
                }else{
                    arr.push(val)
                }
                this.setState({
                        hobbies:arr
                    })
            }
        }

        ReactDOM.render(
            <Radiobox/>,
            document.getElementById('app')
        )
    </script>
</body>
</html>

React - jsx 之下拉框实现

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.min.js"></script>
    <title>react - jsx 下拉框</title>
</head>
<body>

    <div id="app"></div>

    <script type="text/babel">
        class Radiobox extends React.Component{
            constructor(){
                super()
                this.state={
                    selectVal: ""
                }

                // 事件性能优化
                this.handleSelected = this.handleSelected.bind(this)
            }
            render(){
                let {selectVal} = this.state
                return (
                    <div className="radioBox">
                        <p>选中的是 ：{selectVal} </p>
                        <select name="" id="" value={selectVal} onChange={this.handleSelected}>
                            <option value="苹果">苹果</option>
                            <option value="香蕉">香蕉</option>
                            <option value="橘子">橘子</option>
                            <option value="梨子">梨子</option>
                            <option value="杏子">杏子</option>
                        </select>
                    </div>
                )
            }


            handleSelected(e){
                let val = e.target.value
                this.setState({
                    selectVal:val
                })
            }
        }

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

</body>
</html>