React数据绑定

最新推荐文章于 2024-05-11 15:49:26 发布

SCENARIO24

最新推荐文章于 2024-05-11 15:49:26 发布

阅读量233

点赞数 1

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/LeonArdo_Netsr/article/details/119112832

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

双向数据绑定

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
        class NameForm extends React.Component {
            constructor() {
                super();
                this.state = {value: 'react'};
            }
            handleChange(event) {
                this.setState({value: event.target.value});
            }
            render() {
                return (
                    <div>
                        <label>
                            Name: <input type="text" value={this.state.value} onChange={(event) => this.handleChange(event)} />
                            <p>{this.state.value}</p>
                        </label>
                    </div>
                );
            }
        }
        ReactDOM.render(<NameForm />, document.getElementById('example'));
    </script>
</head>
<body>
<div id="example"></div>
</body>
</html>

表单数据绑定

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
        class NameForm extends React.Component {
            constructor() {
                super();
                this.state = {
                    value: '张三',
                    male:'man',
                    select:'3'
                };
            }
            handleChange(event) {
                this.setState({value: event.target.value});
            }
            handleRadio(event){
                this.setState({male: event.target.value})
            }
            handleSelect(event){
                this.setState({select: event.target.value})
            }
            //提交
            handleSubmit(){
                alert(JSON.stringify(this.state));
            }
            render() {
                let {value,male,select} = this.state;
                var arr = ['a','b','c'];
                var arr2 = [{id:1,color:'red'},{id:2,color:'blue'},{id:3,color:'green'}];
                return (
                    <div>
                        <label>
                            姓名:
                            <input type="text" value={value} onChange={(event) => this.handleChange(event)} />
                            <p>{value}</p>
                        </label>
                        <label>
                            <input type="radio" name="radio2" checked= {male =='man'?true:false} value="man"
                                   onChange={(event) => this.handleRadio(event)}/>男
                            <input type="radio" name="radio2" checked= {male =='woman'?true:false} value="woman"
                                   onChange={(event) => this.handleRadio(event)}/>女
                        </label>
                        <label>
                            <select value={select}  onChange={(event) => this.handleSelect(event)}>
                                {
                                    arr2.map(item=><option key={item.id} value={item.id}>{item.color}</option>)
                                }
                            </select>
                        </label>
                        <button onClick={(event) => this.handleSubmit(event)}>提交</button>
                    </div>
                );
            }
        }
        ReactDOM.render(
            <NameForm />,
            document.getElementById('example')
        );
    </script>
</head>
<body>
<div id="example"></div>
</body>
</html>