受控组件优化

最新推荐文章于 2023-04-20 15:55:30 发布

dong.wang

最新推荐文章于 2023-04-20 15:55:30 发布

阅读量76

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/wangdong9395/article/details/109066275

版权

react 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class Hello extends React.Component {
            state = {
                inputTxt: "",
                textareaTxt: "",
                selectTxt: "",
                isChecked: true
            }
            handleChange = (e) => {
                console.log(e.target.type)
               const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value
                this.setState({
                    [e.target.name]: value
                })
            }
            render() {
                return (
                    <div>
                        <input type="text" value={this.state.inputTxt} name="inputTxt" onChange={this.handleChange} />
                        <textarea cols="30" rows="10" value={this.state.textareaTxt} name="textareaTxt" onChange={this.handleChange}></textarea>
                        <select value={this.state.selectTxt} name="selectTxt" onChange={this.handleChange}>
                            <option value="西安">西安</option>
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                        </select>
                        <input type="checkbox" checked={this.state.isChecked} name="isChecked" onChange={this.handleChange}/>
                    </div>
                )
            }
        }

        ReactDOM.render(<Hello />, document.getElementById('root'))

    </script>
</body>

</html>

dong.wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
受控组件优化

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.
复制链接

扫一扫

专栏目录