表单

最新推荐文章于 2025-09-30 08:40:58 发布

原创最新推荐文章于 2025-09-30 08:40:58 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#表单

react 专栏收录该内容

10 篇文章

订阅专栏

本文介绍在React中如何通过ref属性获取input组件的值，并展示了如何在事件处理函数中更新状态。通过实例代码，读者可以了解正确的setState用法及表单控制组件的基本使用。

表单

在这里插入图片描述
遇到的问题整理，
如何获取input的value值：在input 里面设置一个ref属性，方便的定位的这个组件
记住不要将this.setState({value:e.target.value})写成this.setState=({value:e.target.value})

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class LoginControl extends React.Component {
    constructor(props) {
        super(props)
        this.state = {value : ''}
        this.handleSubmit = this.handleSubmit.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }
    handleSubmit(e) {
        alert(this.refs.myTextInput.value)
        e.preventDefault()
    }
    handleChange(e){
        this.setState({value:e.target.value})
    }
    render() {
        //const value = this.state.value
        return (
            <form onSubmit= {this.handleSubmit}>
                <label >
                    Name :
                    <input type="text" value={this.state.value} ref="myTextInput"  onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit"/>
            </form>
        );
    }
}
ReactDOM.render(
    <LoginControl />,
    document.getElementById('root')
);