react表单提交

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(e) {
    this.setState({
      value: e.target.value
    });
  }
  handleSubmit(e) {
    alert('data is submited: '+ this.state.value);
    e.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          name:
          <input type='text' value={this.state.value} onChange={this.handleChange}/>
        </label>
        <input type='submit'/>
      </form>
    );
  }
}

let root = document.getElementById('root');
ReactDOM.render(<NameForm/>,root);

猜你喜欢

转载自www.cnblogs.com/dkplus/p/8882462.html