React 学习

最新推荐文章于 2024-02-23 21:44:51 发布

云墨cloudMel

最新推荐文章于 2024-02-23 21:44:51 发布

阅读量120

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/weixin_42481234/article/details/83023962

版权

React 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

标签里的for不能在正常使用了，而是要写成htmlFor

Jsx中使用{/**/} 注释

---------------------------------------------------

css行内式

title: '审核人',

dataIndex: 'auditPeople',

width:"10%",

render: function( text, record ){

return text ? text : <p style={{'color':'red'}}>未审核</p>

}

---------------------- ------------------------------

<body>
    <div id="reactContainer"></div>

    <script type="text/babel">
        var MyFrom = React.createClass({
            getInitialState(){
                return{
                    username:"",
                    gender:"man",
                    checked:true
                }
            },
            // handleChange(name,event){
            handleChange(event){
                var newState={};
                // newState[name]=name=="checked"?event.target.checked:event.target.value;
                newState[event.target.name]=event.target.name=="checked"?event.target.checked:event.target.value;
                this.setState(newState);
                console.log(newState);                
            },
            submitHandler(e){
                e.preventDefault();
                var is = this.state.checked?'是':'不是';
                var gender = this.state.gender == 'man'?'帅哥':'美女';
                alert(this.state.username+ is + gender + '.')
            },
            render:function(){
                // 标签里的for不能在正常使用了，而是要写成htmlFor。
                // Jsx中使用{/**/} 注释
                return (<form onSubmit={this.submitHandler}>
                        <label htmlFor="username">请输入姓名</label>
 
                        {/*<input type="text" name="username" onChange={this.handleChange.bind(this,"username")} value={this.state.username} id="username" /> */}
                        <input type="text" name="username" onChange={this.handleChange} value={this.state.username} id="username" />

                        <br/>
                        <label htmlFor="checkbox">是与否</label>
                        <input type="checkbox" value="是否" name="checked" id="checkbox" onChange={this.handleChange} checked={this.state.checked} />
                        <br />
                        <label htmlFor="username">请选择</label> 
                        <select name="gender" onChange={this.handleChange} value={this.state.gender}>
                            <option value="man">帅哥</option>
                            <option value="woman">美女</option>
                        </select>
                        <br />
                        <button type="submit">提交</button>
                    </form>
                )
            }
        });
        ReactDOM.render(
            <MyFrom />,
            document.getElementById("reactContainer")
        )
    </script>
</body>