React学习 --- 六.表单处理

最新推荐文章于 2024-07-09 12:36:55 发布

Alex-G

最新推荐文章于 2024-07-09 12:36:55 发布

阅读量107

点赞数

分类专栏： React 文章标签： React基础

本文链接：https://blog.csdn.net/u013692823/article/details/100776901

版权

React 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="../reactJs/react.development.js"></script>
    <script src="../reactJs/react-dom.development.js"></script>
    <script src="../reactJs/babel.min.js"></script>
    <style>
    </style>
</head>

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

</body>

<script type="text/babel">
    /*
    * 用户在表单内填入内容 属于用户根组件的互动,所以不能用this.props
    *   文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，
    * 通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况，更多介绍请参考官方文档。
    * */
    class InputDom1 extends React.Component {
        constructor(props, context) {
            super(props, context);
            this.state = {
                value: 1,
            }
            this.handleClick = this.handleClick.bind(this);
            this.getStateValue = this.getStateValue.bind(this);
        }

        handleClick(event) {
            let inputValue = event.target.value;
            this.setState({value: inputValue})
        }
        getStateValue(){
            alert(this.state.value);
        }
        render() {
            return (
                <div>
                    <input value={this.state.value} onChange={this.handleClick}/>
                    <button onClick={this.getStateValue}>Get Value</button>
                    {this.state.value}
                </div>
            )
        }
    }
    class InputDom extends React.Component {
        constructor(props, context) {
            super(props, context);
            this.state = {
                value: 1,
            }
            this.handleClick = this.handleClick.bind(this);
            this.getStateValue = this.getStateValue.bind(this);
        }

        handleClick(event) {
            let inputValue = event.target.value;
            this.setState({value: inputValue})
        }
        getStateValue(){
            alert(this.state.value);
        }
        render() {
            return (
                <div>
                    <input value={this.state.value} onChange={this.handleClick}/>
                    <button onClick={this.getStateValue}>Get Value</button>
                    {this.state.value}
                </div>
            )
        }
    }
    ReactDOM.render(
        <InputDom />,
        document.getElementById('root')
    )
</script>
</html>