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 (

      <form onSubmit={this.handleSubmit}>

        <label>

          Pick your favorite La Croix flavor:

          <select value={this.state.value} onChange={this.handleChange}>

            <option value="grapefruit">Grapefruit</option>

            <option value="lime">Lime</option>

            <option value="coconut">Coconut</option>

            <option value="mango">Mango</option>

          </select>

        </label>

        <label>

          <input value={this.state.value} onChange={this.handleChange}/>

        </label>

        <label>

          <textarea value={this.state.value} onChange={this.handleChange}/>

        </label>

        <input type="submit" value="Submit" />

      </form>

    );

  }

}

ReactDOM.render(

  <FlavorForm />,

  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 (

      <form>

      <label>

        <input type='text' name='nums' onChange={this.handleChange} value={this.state.nums}/>

      </label>

        <br/>

       <label>

        <input type='checkbox' name='isGoing' onChange={this.handleChange} value={this.state.isGoing}/>

       </label>

      </form>

    );

  }

}

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

ReactDOM.render(<MutilForm/>,root);