小编Sri*_*wda的帖子

axios POST请求正在访问控制器上的url,但是将空值设置为我的POJO类,当我浏览chrome中的开发人员工具时,有效负载包含数据.我究竟做错了什么？

Axios POST请求:

var body = {
    userName: 'Fred',
    userEmail: 'Flintstone@gmail.com'
}

axios({
    method: 'post',
    url: '/addUser',
    data: body
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

浏览器响应:

如果我将标题设置为:

headers:{
  Content-Type:'multipart/form-data'
}

请求抛出错误

发布multipart/form-data时出错.Content-Type标头缺少边界

如果我在邮递员中提出相同的请求,它的工作正常并将值设置为我的POJO类.

任何人都可以解释如何设置边界或如何使用axios发送表单数据.

如何进行条件路由,当且仅当某些条件满足时才会发生路由.例如,当且仅当用户输入正确的凭证时,登录才能成功,用户应该能够看到欢迎页面.

如果我们直接点击一些像"localhost:8080/welcome"这样不应该导航到欢迎页面的URL,只有在登录后才能看到欢迎页面.我怎么能做到这一点,任何人都可以帮助我..谢谢你.

App.js

import React, { Component } from 'react';
import Header from './Header';

class App extends Component{
  render(){
   return(
     <div>
       <Header />
     </div>
   );
  }
}
export default App;

Header.js

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import Login from './Login';
import SignUp from './SignUp';

class Header extends Component{
render(){
  return(
    <div>
    <nav class="navbar navbar-default">
     <div class="container-fluid">
     <ul class="nav navbar-nav">
      <li><Link to={Login}>Login</Link></li>
      <li><Link to={Login}>SignUp</Link></li>
    </ul>
    </div>
    </nav>

    </div>
   );
 } 
}

export default Header;

AllRoutes.js …

假设一个页面包含多阶段表单，在表单的第一阶段包含名称的输入字段，在第二阶段它包含文件的输入，onChange 设置名称和文件的状态值，但是当我们像第一阶段到第二阶段一样来回移动时阶段和第二阶段，我们可以保存输入类型名称的值，但如何保存输入类型文件的值。

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageone: true,
      pagetwo: false,
      pagethree: false,
      pageonedata: "",
      pagetwodata: "",
      pagethreedata: ""
    };
    this.nextPage = this.nextPage.bind(this);
    this.prevPage = this.prevPage.bind(this);
    this.togglePage = this.togglePage.bind(this);
  }

  prevPage() {
    if (this.state.pagetwo === true) {
      this.setState({
        pageone: !this.state.pageone,
        pagetwo: !this.state.pagetwo
      });
    } else if (this.state.pagethree === true) {
      this.setState({
        pagethree: !this.state.pagethree,
        pagetwo: !this.state.pagetwo
      });
    }
  }

  nextPage() {
    if (this.state.pageone === true) {
      this.setState({
        pageone: …

如何在蚂蚁设计中异步验证表单字段？

 <FormItem>
     {getFieldDecorator('zipcode', {
       initialValue: `${customer && customer.zipcode ? customer.zipcode : ''}`,
       rules: [
         // { required: true, message: 'Please input your Zipcode' },
         { validator: this.handlezipCodeChange },
       ],
     })(
       <Input
         prefix={
           <Icon type="zipcode" style={{ color: 'rgba(0,0,0,.25)', visibility: 'hidden' }} />
         }
         type="number"
         placeholder="Zipcode"
         // onChange={this.handlezipCodeChange}
       />
     )}
</FormItem>

函数调用

  handlezipCodeChange = (rule, value, callback) => {
    if (!value) {
      callback('Please input your zipcode');
    }
    if (value.length < 5) {
      callback('Please enter minimum length of 5');
    }
    if (value.length > …

如何在状态中选择下拉列表中的值。这是我的代码iam为名称字段获取值，但是下拉列表不起作用，有人可以找出我所缺少的内容吗？

MyComponent.js

import React,{Component} from 'react';

class MyComponent extends Component{
state={
   data:{
       name:'',
       subject:''  
   }
}

 onChange = e =>
    this.setState({
        data: { ...this.state.data, [e.target.name]: e.target.value }
    },()=>{
        console.log(this.state.data);
    }
    )

render(){
const {data}=this.state;
const subjects= [
              {text: '1',value: 'kannada'},
              {text: '2', value: 'english'},
              {text: '3',value: 'hindhi'}
            ]
return(
<div>
            <Input 
             name="name"
             onChange={this.onChange} 
             placeholder='Your name ...' 
            />
            <Dropdown 
             placeholder='Select Subject'
             name="subject"
             onChange={this.onChange}
             selection 
             options={subjects} 
             />
</div>

)
}
}
export default MyComponent;

如何在状态中选择下拉值？我正在为名称字段获取更改的值，但没有获取下拉列表的值。

这是我的 index.js 文件

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import App from './components/App';

ReactDOM.render((
             <BrowserRouter>
                <App />
             </BrowserRouter>
             ), document.getElementById('root')
            );

这是 App.js

import React, { Component } from 'react';
import Main from './Main';

class App extends Component {
render() {
return (
      <div>
        <Main />
      </div>
  );
 }
}

export default App;

这是我的 Main.js 文件

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Home …

React 表格​​计算页脚总和对搜索排序的页面更改，我们如何实现这一点。

import React from "react";
import { render } from "react-dom";
import ReactTable from "react-table";
import "react-table/react-table.css";

const data = [
  {
    id: 1,
    product: "apple",
    stock: 1,
    price: 123
  },
  {
    id: 2,
    product: "pie",
    stock: 2,
    price: 22
  }
];

const App = () => (
  <div>
    <ReactTable 
      data={data}
      columns={[
        {
          Header: "Id",
          accessor: "id"
        },
        {
          Header: "Product",
          accessor: "product",
          Footer: "Summary"
        },
        {
          Header: "Stock",
          accessor: "stock"
        },
        {
          Header: "Price",
          accessor: "price",
          Footer: ( …

我已经从核心 ui 下载了 react admin 仪表板，现在我需要保护其中定义的仪表板路由，那么我该怎么做，

路由.js

import React from 'react';
import Loadable from 'react-loadable'

import DefaultLayout from './containers/DefaultLayout';

function Loading() {
  return <div>Loading...</div>;
}

const Breadcrumbs = Loadable({
  loader: () => import('./views/Base/Breadcrumbs'),
  loading: Loading,
});

const Cards = Loadable({
  loader: () => import('./views/Base/Cards'),
  loading: Loading,
});

const Carousels = Loadable({
  loader: () => import('./views/Base/Carousels'),
  loading: Loading,
});

const Collapses = Loadable({
  loader: () => import('./views/Base/Collapses'),
  loading: Loading,
});

const Dropdowns = Loadable({
  loader: () => import('./views/Base/Dropdowns'),
  loading: Loading,
}); …