表单

表单

遇到的问题整理，
如何获取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')
);