react自动触发表单提交_react表单提交

class FlavorForm extends React.Component {

constructor(props) {

super(props);

this.state = {value: 'coconut'};

this.handleChange = this.handleChange.bind(this);

this.handleSubmit = this.handleSubmit.bind(this);

}

handleChange(event) {

this.setState({value: event.target.value});

}

handleSubmit(event) {

alert('Your favorite flavor is: ' + this.state.value);

event.preventDefault();

}

render() {

return (

Pick your favorite La Croix flavor:

Grapefruit

Lime

Coconut

Mango

);

}

}

ReactDOM.render(

,

document.getElementById('root')

);

class MutilForm extends React.Component {

constructor(props) {

super(props);

this.state = {

nums: '',

isGoing: true

};

this.handleChange = this.handleChange.bind(this);

}

handleChange(e) {

const target = e.target;

const value = target.type === 'checkbox'? target.checked: target.value;

const name = target.name;

this.setState({

[name]: value

});

console.log(value);

}

render() {

return (

);

}

}

let root = document.getElementById('root');

ReactDOM.render(,root);