react：form表单提交

由于React在浏览器显示的是虚拟的DOM，我们在表单输入值后直接提交，是无法获取到这个值的。对此，官方给出的解决办法是：先把输入的值存放在组件的状态（state）中，之后通过状态的改变更新页面内容，从而显示出正确的值，用户提交的也是从state里获取的表单的value。

constructor() {
    super();
    this.state = {

        item:{
            name:'',
            organization:'',
            school:'',
        },
    }
}

设置提交方法和改变state的状态的方法：

handleSubmit(event) {
    //阻止表单默认提交
    event.preventDefault();
    let item = this.state.item;
    axios.post(host + 'xxx/insert', item).then(
        response => {
            let message = response.data;
            if (message === 'success') {
                alert("插入成功");
                window.location.href = '/xxx/list';
            } else {
                alert("插入失败，请重试");
            }
        }
    );
    this.setState({item:item})
}

changeValue(event) {
    let newItem = this.state.item;
    newItem[event.target.name] = event.target.value;
    this.setState({item: newItem})
}

<form method={'post'} onSubmit={this.handleSubmit.bind(this)}>

    <label>申请数据集名称：
        <input type="text" name={'name'} onChange={this.changeValue.bind(this)}/>
    </label>
    <br/>

    <label>学校：
        <input type="text" name={'organization'} value={this.state.item.organization} onChange={this.changeValue.bind(this)}/>
    </label>
    <br/>

    <label>学院：
        <input type="text" name={'school'} value={this.state.item.school}
               onChange={this.changeValue.bind(this)}/>
    </label>
    <br/>

    <input type={'submit'} value={'提交'}/>
    <input value={'重置'} type={'reset'}/>
</form>

注：form中用onSubmit替代action，其中每个input的name需要对应定义state时的状态，在使用axios调接口传值时，如果是java的springmvc的后端，需要将传输的属性与对应的实体类对接好。